Simple Image Gallery with Hover Animation that link to pages within website

Design help General
1

Hey Guys,

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

2

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:

  1. Change the DIV blocks to link blocks by right clicking them and setting them to link blocks.
  2. Add the overlay DIV into the background DIV and call it whatever (I called mine overlay)
  3. Set the overlay’s position to absolute:full
    19
  4. Style the overlay as you see fit (I made it black for simplicity)
  5. Set the overlay’s display to hidden.
  6. Select the background image DIV.
  7. Go to interactions and toggle to legacy interactions, then add a new interaction.
    42
  8. Add a trigger and click ‘hover’.
  9. Tick ‘affect different element’ and ‘limit to nested elements’ and put in the name of your hover DIV.
    33
    33478×1018 39.1 KB
  10. In the hover over section choose to display the DIV as a block (add timings if you want).
  11. In the hover out section choose to display the DIV as none.

That should work.

1 Like
3

Thank you so much for your time, I will try it out soon. Appreciate the help

1 Like