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?
- Create a CMS Collection with category name, image, and slug, then use a Collection List to display linked images pointing to their respective category pages.
- Add an absolute-positioned overlay div with flexbox-centered text inside a Link Block, and use hover interactions to fade in the overlay on hover.
To set up a category flow in Webflow where each category photo links to its corresponding category page, and to create a hover effect with a grayed-out overlay and vertically centered text, follow these steps.
1. Structure Your CMS Collection
Create a CMS Collection (e.g., Categories) with fields such as:
Name (Plain Text)
Slug (auto-generated)
Image (Image field)
Ensure each category has a unique photo and a generated slug for page routing.
2. Create the Collection Page Template
- Webflow automatically generates a Collection Page for each CMS item.
- Style the Categories Template Page as needed; each will render dynamically based on the CMS entry.
3. Build the Category List on Another Page
- Go to the page (e.g., Home or Categories) where the list will appear.
- Add a Collection List and connect it to your Categories Collection.
- Inside the Collection Item, place the following:
- Image element connected to the CMS Image field.
- Link Block: Wrap the image in a Link Block and set it to Link to Current Category under Page → Collection Page.
4. Create the Hover Overlay with Centered Text
Inside the Link Block, add a div block as an overlay:
Position: Absolute, Full.
Background Color: Semi-transparent black or gray (e.g., rgba(0, 0, 0, 0.5)).
Z-index: Higher than the image.
Initial Opacity: Set to 0%.
Add Transition: Opacity for smooth fading.
Inside this overlay, add a Text Block:
Set Display: Flex, Justify: Center, Align: Center on the Overlay Div to vertically and horizontally center the text.
Set the text as the category name (bind to the CMS field).
5. Add Hover Interactions
Select the Link Block and open the Interactions Panel.
Add a Hover In interaction:
Animate the Overlay Div’s opacity to 100%.
Add a Hover Out interaction:
Animate the Overlay Div’s opacity back to 0%.
Summary
Set up a CMS Collection for categories, use a Collection List with linked images, and create an absolute-positioned overlay div with flex centering for vertical and horizontal text alignment. Use Webflow’s interactions to fade in the overlay on hover.