Hover over gifs

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!

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

Replying because I have the same question as well. 

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)