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.