The reference site is: http://www.visitfinland.com/
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.
@monsterkyckling… Try this tutorial / video.
I think it is similar to your needs.
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!
The above tutorial doesn’t seem to exist any more; it appears and disappears!
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. Be sure to set your main div to Overflow: Hidden for when the slide goes off screen.