Mouseover Animation on Image / Text

Design help Animations & Interactions
1

Hey Guys,
hopefully you can help me as I have no idea how to set this animation up.

On the linked page you see a Gallery with Images. The Idea is that on mouseover, you see a Text Block above the Image as well as decreasing the opacity of the image so the text can be read better.

How to do this? I am already struggeling with positioning the text correctly :frowning:

Many thanks for your help!

Here is my public share link: https://preview.webflow.com/preview/smilike?utm_source=smilike&preview=5f567681f7c55df977f1416f1864cf1a
(how to access public share link)

2

Hey @martinfoerster,

Hereā€™s an easy tutorial for you Reveal elements on hover ā€” Webflow interactions and animations tutorial - YouTube

Hope this helps.

Best,
Naweed

3

@nwdsha many thanks for putting me in the right direction. For the first element it works but how can i apply it to the other ones?

I am struggeling a little bit here :frowning:

4

can anyone help me out here? :slight_smile:

5

Hello,

First of all, very nice designed project.

In order to place the same animation to other elements, they need to have the same class name.
Give the same ā€œHoverblockā€ name to the other divs, and the same name for their children elements.
Then, go to the interaction you created for it, and change the ā€œTrigger Settingā€ to Class (at the bottom of the interaction)

57%20AM

I hope this helped

6

Dear @Eli11, many thanks for your help on this.
I did exactly like you indicated but it does not seem to work :frowning:

Any Ideas?

7

The animation seems to be stuck in the mouse over, on mouse out, nothing happens