Jump to content

Hover over gifs

Recommended Posts

  • 2 weeks later...
  • Replies 3
  • Views 2.5k
  • Created
  • Last Reply
  • 2 weeks later...
  • 5 months later...

Hi, I've used the following to create a logo image that only moves when the viewer hovers over the image: (I inserted my still image as an image block and then entered this code in the custom CSS editor)

//Creating the gif image
.sqs-image .sqs-image-content::after {
  background-image: url('https://ADD THE URL OF YOUR UPLOADED GIF HERE.gif');
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

//Hover mode
.sqs-image .sqs-image-content:hover img {
  opacity: 0;
.sqs-image .sqs-image-content:hover::after {
  opacity: 1;


So in your case you'd need to upload the thumbnail/still image for each, then target these when applying the code one by one so that each of your gifs is attached to a specific image block. (replace .sqs-image .sqs-image-content each time for the #id)

Link to comment


This topic is now archived and is closed to further replies.

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