Youtube Hover Effect (Image to GIF on hover)

Design help Animations & Interactions
1

Hello,

I’m trying to achieve the youtube thumbnail effect when hovering over an image (shows preview of video) like youtube.com

Is it possible to achieve it by showing a gif on hovering an image?

Here is my public share link: LINK
(how to access public share link)

2

I think this works decently:

  1. Create a lightbox link
  2. Put a DIV inside that lightbox link
  3. Put the lightbox thumbnail and the gif thumbnail preview in a DIV
  4. Set the gif to none (hide it)
  5. Apply a mouse hover animation to that DIV so that when you hover over it, it shows the gif thumbnail

I’m not sure it would work without the lightbox, but if you don’t want them connected, you can make them all separate (unlinked) lightboxes. Here is the project I was messing around with this idea on - feel free to check it out as I’m not an expert and very well might have missed a step :sweat_smile:

:wave: just a little heads up - you need to toggle the preview off then on again for this to work, not sure why that is happening

https://preview.webflow.com/preview/alex-thorson-news?utm_medium=preview_link&utm_source=designer&utm_content=alex-thorson-news&preview=684d70ca57abdcaa01ef0e4e92ede745&workflow=preview:wave:

3

oh! And you have to make the GIF from the video first haha that’s step one!

4

Amazing works! Thank youu

1 Like
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.