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