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
- Set up category pages using a CMS collection, design template, and link photos to respective category pages with a bound Collection List and Link Block.
- Center overlay text using flexbox by setting width and height to 100%, display to flex, and positioning to absolute.
- Implement a hover effect by adding an interaction to the image or link block, adjusting opacity to create a graying-out effect.
To set up a category flow in Webflow, where each category photo links to its respective category page, follow these steps. Additionally, I will guide you on how to vertically center text in a text box for a hover effect.
1. Set Up Category Pages
- Create a CMS Collection for categories if you haven't already.
- Add a field for category name and another for the category photo.
- Design a Template Page for your categories by going to the Pages section and selecting your CMS collection template.
2. Link Category Photos to Their Pages
- Add a Collection List to your page.
- Bind the Collection List to the Categories CMS Collection you created.
- Add an Image element inside the Collection Item and bind it to the category photo field.
- Wrap the Image in a Link Block and set the link source to the Current Category Page.
3. Create a Text Box Overlay with Vertical Centering
- Go to the Styles Panel for your text box.
- Set the Width and Height to 100% to ensure it covers the photo entirely.
- Set Display: Flex and both Align and Justify Settings to Center to vertically and horizontally center the text.
- Set Positioning to Absolute and anchor it to the top-left corner of the container.
4. Implement a Hover Effect
- Select your Image or Link Block and go to the Styles Panel.
- Add an Interaction: Set the initial state to show the photo normally.
- On hover, set the Interaction to change the photo's opacity for a graying-out effect.
- Ensure the Text Box is Visible on hover.
Summary
To link category photos to their respective pages, wrap each image in a Link Block bound to category pages. Use flexbox to center text within an overlay box, anchoring it to the container, enabling a hover effect by adjusting opacity settings.
