Jump to content

Animated .gif On Hover - Portfolio Page Grid

Recommended Posts

Hello, I was wanting to see if anybody could assist me in making a customization to my Portfolio page. The specific page I'm working on is this: https://www.codynitcher.com

Currently I have set the thumbnail images to each of my posts to be an animated .gif, but I'd like to customize this a bit so that they are static images, but upon hover would then switch to the animated .gif version of that project. 

I've seen posts online about doing this for one-off images via a code blog on a page, wrapping the image in a div tag to reference some custom CSS code. I understand how that could work. But how would I apply this same idea to a Template page, where I don't have direct access to the those thumbnails (to my knowledge, happy to be corrected). 

What I'm trying to do is to do a similar effect I've found on this person's website: https://anderswaltz.com

Any help would be appreciated, thank you!

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I would do it like this: 

Set the animated GIFs as background images of the related .grid-items, and hide the static images on mouse-over.

So when you hover the static image, it will be hidden, and the animated GIF (set as background image) will become visible instead.

To do this, each grid-item must be specifically addressed in the custom CSS (which is possible with the href attribute of each grid-item), and a background image (animated GIF) has to be defined, which must be uploaded to the content library beforehand to know the URL of the image.

But I have to admit that I have no idea how the desired effect should work on mobile.
 

a.grid-item:hover img { 
	visibility: hidden;
}

.grid-item[href="/portfolio/project-one-..."] {
	background-image: url("/.../background-1.gif");
	background-repeat: no-repeat;
	background-size: cover;
}

.grid-item[href="/portfolio/project-two-..."] {
	background-image: url("/.../background-2.gif");
	background-repeat: no-repeat;
	background-size: cover;
}

.grid-item[href="/portfolio/project-three-..."] {
	background-image: url("/.../background-3.gif");
	background-repeat: no-repeat;
	background-size: cover;
}

/* to be continued for all grid items */

 

Edited by VisualNotes
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.