Overlay on hover for dynamic items

Hey!

I am trying out the dynamic lists for creating a blog. I am trying to solve the problem where the user hovers over the dynamic item and the title pops up (with interactions)

I know there are many layers and steps involved, but I haven’t quite figured it out. :slight_smile:

Help please!

Shared link below!


Here is my public share link: LINK
(how to access public share link)

Hi, here are the principles of such an animation.

It’s not important wether it happens in a static div or in a dynamic list item.

Inside your div or dynamic item, lay a div that you call “item container”
Give it position:relative, and design it as desired. This div represent the background, or normal state of your item.
Inside this div lay another div, name it “title div”, put the title in it. Give the div position:absolute andstyle it as desired. When you’re done, the whole item should look exactly like you want it to be when hovered.
Now hide the title div. Give it opacity:0 and display:none.

Select the container div and create a new interaction. Chose the onHover trigger, and “Affect another element”, type in the title div name to select it as a target. Now add a first step onHover: display:box in zero ms. Then a second step opacity:100% in 200ms. Do the exact inverse onHoverOut.

Thank you for your reply.

I think I am super close to nailing this, but there are a few hiccups.

I have the overlay on hover for what I was looking for.

I am having trouble with the hover on the title div. Not showing up…

What did I screw up! ha

https://preview.webflow.com/preview/shana-revell-photography?preview=d377e460f05f102102ba233908b36d1c

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.