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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.