Jump to content

Animate .gif on rollover?

Recommended Posts

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
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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
  • 1 year later...

@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!

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.