Hover gif animation on video

Hi, I need some help with a hover effect for video. I'd like to achieve the hover animation effect like on youtube or this site: https://www.visuals-internationals.com/

Ideally I'd like the thumbnail to be a still image, as you hover over, it turns in to a gif, and reverts back to still image when the cursor is moved.

I'd like to use this in a gallery as well as a standalone video. Any help is appreciated.

Thanks.

You can do with CSS. Can you share link to page (on your site) where you want to create this effect?

Hey, sorry for the late reply, I could still use your help. Here is the page: https://fourgroundspreview.squarespace.com/work- password:fourgroundspreview

Thank you!

Any updates on this question?

On 1/13/2021 at 6:06 PM, jakobss1 said:

Any updates on this question?

Can you share site url? We can help easier

Each template needs different code

Hi Tuanphan, 
I have the same issue, can help with this? - I want a gif to start when hovering over a portfolio project thumbnail. 
My site URL is https://seal-olive-syrb.squarespace.com

20 hours ago, boissons said:

Hi Tuanphan, 
I have the same issue, can help with this? - I want a gif to start when hovering over a portfolio project thumbnail. 
My site URL is https://seal-olive-syrb.squarespace.com

What is password?

I am having a similar issue

14 hours ago, smwearehair said:

I am having a similar issue

What is your site url?

Hi @tuanphan, Can I also have your help please?
My website is http://norbertvarjasi.com 

On the mainpage, I have pictures in galleries for each of my projects. I'd like to have a short (1-5 seconds) gif or video when hovering these images. Here is a link for one of the gifs I made for the Lotus project just for testing: https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can't_breathe+(Original)_1.gif

Can you please advise me about the code, and if It is better to use a gif or maybe an mp4 or other formats?

Many thanks,
Norbert

On 8/27/2022 at 5:22 AM, vorbert said:

Hi @tuanphan, Can I also have your help please?
My website is http://norbertvarjasi.com 

On the mainpage, I have pictures in galleries for each of my projects. I'd like to have a short (1-5 seconds) gif or video when hovering these images. Here is a link for one of the gifs I made for the Lotus project just for testing: https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can't_breathe+(Original)_1.gif

Can you please advise me about the code, and if It is better to use a gif or maybe an mp4 or other formats?

Many thanks,
Norbert

Try adding this to Design > Custom CSS

/* TEST CODE - first image */
body.homepage figure:nth-child(1):hover img {
    content: url(https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can%27t_breathe+%28Original%29_1.gif);
}

11 minutes ago, tuanphan said:

Try adding this to Design > Custom CSS

/* TEST CODE - first image */
body.homepage figure:nth-child(1):hover img {
    content: url(https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can%27t_breathe+%28Original%29_1.gif);
}

 

Hi @tuanphan,

Thank you for the code. It works very nicely on the image I'd like to use, but unfortunately this applies the same gif to the first picture of every section. (see http://norbertvarjasi.com) 

Would there be a way to assign different gifs to the different jpg stills?

Many thanks,

Norbert

21 hours ago, vorbert said:

Hi @tuanphan,

Thank you for the code. It works very nicely on the image I'd like to use, but unfortunately this applies the same gif to the first picture of every section. (see http://norbertvarjasi.com) 

Would there be a way to assign different gifs to the different jpg stills?

Many thanks,

Norbert

Try this new code. If it works for first image, I will send guide for other images

/* TEST CODE - first image */
[data-section-id="5e5180de169a2139bb6dcaa1"] figure:nth-child(1):hover img {
    content: url(https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can%27t_breathe+%28Original%29_1.gif);
}

1 hour ago, tuanphan said:

Try this new code. If it works for first image, I will send guide for other images

/* TEST CODE - first image */
[data-section-id="5e5180de169a2139bb6dcaa1"] figure:nth-child(1):hover img {
    content: url(https://static1.squarespace.com/static/5e517bf6922842434f29db57/t/630910afc6df434175733c41/1661538493564/adam_can%27t_breathe+%28Original%29_1.gif);
}

 

Thank you! I just added it now, and it works well for the first image.

On 8/29/2022 at 3:26 PM, vorbert said:

Thank you! I just added it now, and it works well for the first image.

 

[data-section-id="5e5180de169a2139bb6dcaa1"] is Section ID.

Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

figure:nth-child(1):hover is first item in the section

the second item will have class name: figure:nth-child(2):hover

Similar for item 3, 4, 5...