Streaming live at 10am (PST)

Slide Overlay on Hover


#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.

http://tutorials.webflow.com/show-content-on-hover


#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! smile


#5

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


#6

Hey @Hywel you may find this Tutorial Helpful:
https://webflow.com/blog/how-to-create-a-thumbnail-overlay

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.


#7