Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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");


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...