Gif on hover on index pages

Hi, been trying to get this to work for a couple of hours now.

I'm using the Avenue template to display my portfolio and it has a quite nice hover effect built in (it changes the opacity of the image). However, I would much rather to have a .gif play instead of that effect.

I have managed to get this to work on separate pages with video and image blocks, but I really can't get this to work as all the images are presented on an index page. So to even find the right ID on an index page seems like a struggle, all the Chrome "Squarespace ID finder" gives me is the collection ID. I've also ventured into the actual code to see anything there, and there I found both a specific "collectionid" plus a specific "gallery-block" id for one of my images. But when trying to apply a code such as this one (that worked for an image block on a separate page), I can't get it to work for the images on my index page.

Very much appreciate some help on this. The website is https://www.henrikhedin.com/

Thanks.

You mean

Hover on each item >> Replace image with gif + show overlay + show title?

Not necessarily show overlay, but replace with gif and title would be nice.

On 1/15/2023 at 2:26 AM, tuanphan said:

You mean

Hover on each item >> Replace image with gif + show overlay + show title?

14 hours ago, tuanphan said:

(This code for first, second items. Replace Pixabay with gif urls)

Add to Design > Custom CSS

a.project[href="/swedish-police-2021/"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2020/12/23/21/21/macarons-5856039_1280.jpg);
}
a.project[href="/interflora/"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/01/10/00/17/italy-7708552_1280.jpg);
}

 

Thanks a lot, works perfectly!

Hi 

Sorry I'm just jumping in here... Would this work for my site as well? www.wernerbotha.com
I currently only have gifs as my projects images, but would also like the rollover effect

I just tried it and didn’t really work, I would really appreciate the help

Thanks!!

On 1/19/2023 at 9:47 PM, wernerbotha said:

Hi 

Sorry I'm just jumping in here... Would this work for my site as well? www.wernerbotha.com
I currently only have gifs as my projects images, but would also like the rollover effect

I just tried it and didn’t really work, I would really appreciate the help

Thanks!!

Use this CSS

a.grid-item[href="/work/feature-film-meisies-wat-fluit"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2020/12/23/21/21/macarons-5856039_1280.jpg);
}
a.grid-item[href="/work/nissan-magnite"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/01/10/00/17/italy-7708552_1280.jpg);
}

Thanks you very much Tuan! It worked perfect!

I have one more question, is there a way to add a quick fade transition before AND after the image hover? 

I really appreciate it!

On 1/27/2023 at 3:00 AM, wernerbotha said:

Thanks you very much Tuan! It worked perfect!

I have one more question, is there a way to add a quick fade transition before AND after the image hover? 

I really appreciate it!

Hi,

This will require different code. Can you remove temporarily the code I sent? I can test code again easier

Hi Tuan

Yes I can remove it, please let me know what you need from me to get this new code from you?

Thanks!!

On 1/30/2023 at 4:15 PM, wernerbotha said:

Hi Tuan

Yes I can remove it, please let me know what you need from me to get this new code from you?

Thanks!!

Sorry. Just had some days off. Do you still need help?