Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Recommended Posts

Hi there! 

I wondering is it's possible to have a GIF appear when someone hover over an image link to a page? I have gifs right now as thumbnails but it feels like a bit much as I add more projects. So I'd like it to be a still image until you hover over to click on a project. https://www.lilianapenagos.com/ for reference.

 

Thank you all!

 

Share this post


Link to post

Is this the York Template? because I have the same exact question with my website and wanting a preview of films via GIFs before viewers click. coletypical.com

Share this post


Link to post

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)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...