Animate .gif on rollover?

Site URL: http://www.jimmadden.ca/motiongraphics

Hello all,

First time asking on here, but I cant for the life of me figure this one out. I have a page of gifs I have converted from .mov files to show some animation, but there is so many of them I would ideally like to have a static image (possibly with text about the client or something) then when you hover over each one, have that gif animation start. I feel like this would help speed up the browsing experience on this page, any help on this would be greatly appreciated!

Using the Jasper Template.

- Jim

You will need to find the block- ID for each image, and do this.

You will also need a static and dynamic image uploaded in the files and to link them in the code.

So the last 2 blocks of code will need to be repeated 20 times for 20 images, changing the block- ID

.thumb-image.loaded {
    display: none;
}

#block-yui_3_17_2_1_1592964324330_57866 .image-block-wrapper.has-aspect-ratio {
    background: url("STATIC IMAGE");
}

#block-yui_3_17_2_1_1592964324330_57866 .image-block-wrapper.has-aspect-ratio:hover {
    background: url("PLAYING IMAGE");
}

@rwp Do you have code for how to do this when the images are within a summary block?

I have added a summary block of gallery images to my site, and I would like each individual photo to have a custom gif on hover. I know how to find the block ID, but I cannot figure out how to customize each photo with its own animated rollover.

I would like to continue using the summary block for best formatting.

Thank you so much!

On 3/17/2022 at 3:59 AM, jsaroufim said:

@rwp Do you have code for how to do this when the images are within a summary block?

I have added a summary block of gallery images to my site, and I would like each individual photo to have a custom gif on hover. I know how to find the block ID, but I cannot figure out how to customize each photo with its own animated rollover.

I would like to continue using the summary block for best formatting.

Thank you so much!

Try this code

#block-id .summary-item:nth-child(1):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
#block-id .summary-item:nth-child(2):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg);
}
#block-id .summary-item:nth-child(3):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg);
}

If it doesn't work, Can you share link to page where you added summary? We can give the code to achieve this.

Hi, I'm also trying to do this. I have a gallery on my homepage and would like for each of the images to be static and then becomes gifs on hover. I've tried this code but can't get it to work.  How do I target just the gallery on my homepage (url: https://www.emilyakins.com/) and get the images to switch to GIFs on hover?

Thanks so much!

Emily 

22 hours ago, eakins23 said:

Hi, I'm also trying to do this. I have a gallery on my homepage and would like for each of the images to be static and then becomes gifs on hover. I've tried this code but can't get it to work.  How do I target just the gallery on my homepage (url: https://www.emilyakins.com/) and get the images to switch to GIFs on hover?

Thanks so much!

Emily 

You can use this code. Repeat similar for other items. Replace Pixabay with gif image url

body.homepage figure:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
body.homepage figure:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg);
}
body.homepage figure:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
body.homepage figure:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg);
}

Hello,

I am trying to replace buttons with gifs.

Each gif has a URL linked to it (more precisely another page of the website), and i'm trying to replace the gif by another gif (the same but with a different color) when rollover.

Both gifs need to link to another page of the website.

Could you please help ? Thank you so much :)

Vincent

url : cymaforma.com

password : coucou

On 11/15/2023 at 11:17 PM, cymaforma said:

Hello,

I am trying to replace buttons with gifs.

Each gif has a URL linked to it (more precisely another page of the website), and i'm trying to replace the gif by another gif (the same but with a different color) when rollover.

Both gifs need to link to another page of the website.

Could you please help ? Thank you so much 🙂

Vincent

url : cymaforma.com

password : coucou

Hi,

You mean these buttons?

Use CSS code like this to Website Tools (under Not Linked) > Custom CSS

div#block-af4bd6475b206c407a08:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/11/26/19/09/butterfly-8414148_1280.jpg);
}

with div#block....is button (image) block id, use this free tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

replace Pixabay image with your new gif url