Structure for Hovering Rollover with button and text

Hello everyone. I am new to the forum but not to Webflow. I am a print designer so please be gentle. I am building a portfolio site and want to create rollovers.

I want the square image icon to have a transparent color over it and a button appear on hover and disappear when not hovering.

I am not sure of the structure of elements. I have a grid with Div block to hold image. In what structure do I build the other elements to animate them on hover?

See images attached.!

Here is my public share link:

Any help is greatly appreciated.

Hi and welcome :webflow_heart:

Share your read only link so I can show you how to achieve your purpose

the following should give you shared acces:

Hope it helps

I think this will help. Thank you so much for spending the time to help out a fellow WebFlow-er.
So much appreciated. I will reach out if I need additional support.

1 Like

If I wanted to put type and a button on tp of the rollover tint color, would I nest another Div block on top of the color tint Div and add the type and button in that Div?


I think inserting A button into the tint Div will do it for you :slight_smile:

Let Me know if thatโ€™s work for You, if it wonโ€™t Iโ€™ll show you how

1 Like

Thanks again for responding. I will give this a try along with your other video instructions.
Would you be up for helping me out with building my site by answering questions/tutoring me though it. I am not new to WebFlow but am trying to build a site beyond my current skill set. I will pay you for being a tutor. Iโ€™m sure this can work (internationally) through PayPal or Venmo or some other service.
Please let me know if you or someone you know would be willing to lend their expertise.
Thanks again for any info.