Gif hover on portfolio item collection - squarespace 7.1 Mark Novo Template

Site URL: https://www.stoik-trisula.com/work

Hey, is there any chance to play gif image when mouse hovering portfolio items? The only option for now is just background color. Thank you!!

example : https://plus-ex.com/experience

I'm using Squarespace 7.1 and Mark Novo template

Please provide password, the gif maybe injected via custom code

pass: stoiknusantara2020

I was also hoping to achieve this effect!

On 2/27/2023 at 10:30 PM, tierneyc said:

I was also hoping to achieve this effect!

If you share link to portfolio on your site, we can give CSS code to achieve this

link: https://caribou-smilodon-6l25.squarespace.com/config/pages/63ee9a8e6a0b10602e7b29e5

password: abc

On 3/7/2023 at 3:20 AM, tierneyc said:

link: https://caribou-smilodon-6l25.squarespace.com/config/pages/63ee9a8e6a0b10602e7b29e5

password: abc

See this

https://forum.squarespace.com/topic/236781-hover-over-to-play-gif-in-squarespace-71-gallery-including-clickthrough-link-with-ability-to-use-a-universal-filter/?do=findComment&comment=614318

Hi, I also want to use gifs as feature image of my portfolio pages, how do I do it?

On 7/14/2023 at 12:22 PM, SofiaHoughton said:

Hi, I also want to use gifs as feature image of my portfolio pages, how do I do it?

You mean always use gifs or change static to gif on hover? If on hover, you can share link to portfolio page, we can help easier

On 7/18/2023 at 5:27 PM, tuanphan said:

You mean always use gifs or change static to gif on hover? If on hover, you can share link to portfolio page, we can help easier

I would like to use gifs on hover for the feature image of my Work grid
this is the site I'm working on
https://sofiahoughton.com/
password: banana

On 7/26/2023 at 4:22 PM, SofiaHoughton said:

I would like to use gifs on hover for the feature image of my Work grid
this is the site I'm working on
https://sofiahoughton.com/
password: banana

Use this CSS code, change to your image gif urls

a.grid-item[href="/work/muralvidkit"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/20/04/45/leva-8138344_1280.jpg);
}
a.grid-item[href="/work/muralelevate"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/25/19/47/milky-way-8149815_1280.jpg);
}
a.grid-item[href="/work/muralproduct"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/31/14/44/nature-7890194_1280.jpg);
}
a.grid-item[href="/work/origin"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/30/00/12/cat-8157889_1280.png);
}
a.grid-item[href="/work/decoded-aflt9"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/20/04/45/leva-8138344_1280.jpg);
}