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

Animate .gif on rollover?


jmmddn

Question

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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...