Hover Over image turning it into a gif in a gallery block in Squarespace 7.1

Hello,

6 hours ago, thewolvesdenvisualco said:

Hello,

I posted this months ago and never got any info, so I'll try again.

I am currently using 7.1 on my site and what I am looking to do is have an image roll over to a gif on hover-over. currently, I have each gif just constantly looping, and I feel like it looks a little hectic that way.

The gifs are placed within a gallery block with a full bleed Grid strip if that matters at all. 

As an example, I am looking to achieve a similar result to this site. https://www.simoneaves.com/home-reshaped-gifs

Thank you for any help.

My site is www.kevinplumley.com 

It is live, and you will see on the main page a rough Idea of what I am looking to do.   it is 2 blocks with 4 images each, and I am looking to do it with all images. 

The targeted site gifs are hard coded to the image, so to apply the same to your site, kindly provide us with a gifs that bind to the single image as sample, I can provide a script to achieve that

15 hours ago, Beyondspace said:

The targeted site gifs are hard coded to the image, so to apply the same to your site, kindly provide us with a gifs that bind to the single image as sample, I can provide a script to achieve that

If I understand correctly, here is an image sample as a static image and the gif equivalent! 

If I am mistaken, please correct me!

Thank you for the response!

22 hours ago, tuanphan said:

Try this code to Website Tools > Custom CSS for Landscapes item

figure.gallery-strips-item {
    a[href="/landscape-nature"] img {
    content: url(https://media.invisioncic.com/p289038/monthly_2024_11/landscapes.thumb.jpg.ce2562d4089a9a3aa90f929ba3ee66f0.jpg);
}
    a[href="/landscape-nature"]:hover {
    content: url(https://images.squarespace-cdn.com/content/v1/533494a4e4b0d765125378e0/e6f1baef-12bb-4fff-9ea2-882908f99714/landscapes_1.gif?format=750w);
    }
}

Amazing! To replicate this, just upload the images and replace each link with the proper image set/ adjust the page name accordingly I take it?

On 11/26/2024 at 4:47 PM, thewolvesdenvisualco said:

Amazing! To replicate this, just upload the images and replace each link with the proper image set/ adjust the page name accordingly I take it?

Yes. If you don't know how to find image url, you can follow this