I am a WordPress divi user and recently got very interested in Webflow. I can’t seem to work out how would I do this.
So What I am doing is:
Setting up a simple grid, placing div blocks with a background as the photos. Now all I want is to make a simple hover effect with overlay and text, each image in a grid will be linked to a page.
I am not using CMS at the moment, just wondering if it’s possible without CMS?
Appreciate your help.
Here is my site Read-Only: https://preview.webflow.com/preview/jave-test?utm_medium=preview_link&utm_source=designer&utm_content=jave-test&preview=07e6769aff052995a0c2a5d8028bcabf&mode=preview
Yes this is possible without CMS. You can add a custom interaction, so that the div’s open up an overlay when hovered over.
Here’s how I would do it:
- Change the DIV blocks to link blocks by right clicking them and setting them to link blocks.
- Add the overlay DIV into the background DIV and call it whatever (I called mine overlay)
- Set the overlay’s position to absolute:full
- Style the overlay as you see fit (I made it black for simplicity)
- Set the overlay’s display to hidden.
- Select the background image DIV.
- Go to interactions and toggle to legacy interactions, then add a new interaction.
- Add a trigger and click ‘hover’.
- Tick ‘affect different element’ and ‘limit to nested elements’ and put in the name of your hover DIV.
- In the hover over section choose to display the DIV as a block (add timings if you want).
- In the hover out section choose to display the DIV as none.
That should work.
Thank you so much for your time, I will try it out soon. Appreciate the help