Jump to content

Create GIF hover on individual images within a summary block using CSS

Recommended Posts

I have added a summary block of images to my website. Upon hover/rollover, I would like each individual image to have its own animated gif that plays.

I know how to add custom CSS to an entire block, but am having a hard time finding code to allow me to edit each hover image  individually within the Summary Block.

Thank you so much!

Link to comment
  • Replies 1
  • Views 458
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Add to Design > Custom CSS

#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);
.summary-item:nth-child(2):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg);
.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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.