How can I set up a category flow in Webflow, where each category photo links to its respective category page? Additionally, is there a way to vertically center text in a text box that covers 100% of the container behind it, for a hover effect where the whole photo grays out with centered text?
TL;DR
To create a category flow in Webflow with clickable category photos and properly centered hover text, follow these steps:
1. Create a CMS Collection for Categories
- Go to CMS and Create a Collection (e.g., “Categories”).
- Add necessary fields:
- Name (text)
- Category Image (image)
- Slug (auto or manual for URLs)
- Any other relevant fields.
- Publish the CMS collection.
2. Build the Category Grid/List
- Go to the Page where you want to display the categories.
- Add a Collection List and bind it to the Categories CMS collection.
- Inside each Collection Item, add:
- An Image element bound to the Category Image field.
- A Link Block that wraps around each image. Set the link to the dynamic Category Page URL.
3. Create Hover Overlay with Centered Text
- Inside the Link Block, add a Div Block as an overlay for the hover effect.
- Set the overlay div:
- Position:
absoluteandfull (100% width & height). - Background color: Use a semi-transparent dark overlay (
rgba(0,0,0,0.5)). - Display:
flex, Align:center, Justify:center. - Opacity:
0(it will appear on hover). - Add a Text Block inside the overlay div and style it as needed.
- Hover Effect:
- Select the overlay div, go to Interactions > Hover In, set Opacity: 1.
- Add a Hover Out interaction to revert Opacity: 0.
- Optionally, animate with a fade-in transition for a smoother effect.
4. Link to Category Pages
- Ensure each Link Block is set to Current Category Page by using the Dynamic Link feature in the settings panel.
- If needed, create a Category Template Page in CMS Pages with specific details about each category.
Summary
You’ve now created a CMS-driven category grid where each photo links to its own category page. You’ve also added a hover effect where a full-width/height overlay with centered text appears to indicate interactivity.