Slide Overlay on Hover

Design help Animations & Interactions
1

I´m trying to make a transition and tranform effect on my tiles like the ones found here

The reference site is: http://www.visitfinland.com/

2

Its possible. Use the hover over div to trigger two interactions.

First, make a div that’s hidden that you need to have displayed with the caption and all that.
Then, make two interactions on hover for the image-div.

Interaction 1 for the moving picture:
On hover image container: move up 10 px, transition 500ms,
on mouse out move to normal, transition 500ms.

Interaction 2 for the black caption:
on hover image container (or div, whatever you use)
affect other element (namely: caption div)
display block (caption div) and remove transition time (thus: 0 seconds)
move caption div up 250px (or whatever you need) add transition delay 500ms on vertical position
on mouse out, move back to origin, use same transition. and add display:none.

That should work.

3

@monsterkyckling… Try this tutorial / video.

I think it is similar to your needs.

4

Hi @monsterkyckling, This demo may also be helpful: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Click on the page titled “Slide Overlay on Hover”

Hope this helps! :slight_smile:

1 Like
5

The above tutorial doesn’t seem to exist any more; it appears and disappears!

6

Hey @Hywel you may find this Tutorial Helpful:

Please let me know if you have any questions and share your Read-Only link so that we can provide more help. :smile: Be sure to set your main div to Overflow: Hidden for when the slide goes off screen.

1 Like