Streaming live at 10am (PST)

How make an Element slide over another when hovering?

Hi
I try to create a hovereffect.
When I hover an image then a semitransparent area with some text should slide over it.
Like here:
(it does NOT have to follow the mouse. I just want a simple sliding over)


It’s from this site:

This is what I managed to do with the Reveal Tutorial.

Removed, shared link.

But it slides forth and back instead of only slide back when hover out.

Can anybody guide me to the right direction?
It seems more complicate than I thought it was :slight_smile:

Kind regards
Alain

Hey, @Alain Please look into the below read-only link I had used the same effect before it might help you.

Read-Only

Thanks Sachin I will check it out :slight_smile:

The problem is, that when I would do it like you did, then I would have a Link-Element (E-Mailaddresse) inside the Link-Block.
Link-Elements within Link-Elements are not allowed …

That’s true Link elements can not be nested inside each other. in your case however when the user hovers on the image the details with links pops up right, So why don’t you use a div as a parent and add the mouse-in interaction to it. The problem will be solved.

The example which I showed about the intention was to make an entire image card as a link.

Thanks alot! It works now.
I thought it would only work with Link-Elements :woozy_face: