Jump to content

Reset gif on hover

Recommended Posts

Site URL: https://agicreative.com/info/team

Site Password: password

I have some CSS code that is allowing me to do a hover effect on a stacked gallery. Right now when you hover the jpg transitions into an animated gif. Problem is that once you mouse out and then mouse over again, the gif keeps animating and doesn't reset to the beginning. Any way to adjust this code to when you hover, it starts the gif from the beginning again?

Here is the code I am using from this source: https://www.ghostplugins.com/steps/110fne84

// Rollover Image Effect //

.sqs-gallery-block-stacked .sqs-gallery {
  position: relative;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper:hover ~ .image-wrapper {
  opacity: 1;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}

 

Link to comment
  • Replies 0
  • Views 633
  • Created
  • Last Reply

Archived

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.