Hover on video gallery block goes to alternate image

I'm trying to have an alternate image ease on and zoomed in when hovered, for the video thumbnails in a video gallery while still remaining clickable.

Ultimately, I'm trying to get the thumbnails to go from "dim image with logo" to "full color zoom in without logo".

https://oarfish-flamingo-26ms.squarespace.com/

PW: MAKESOUND2023

TY in advance!

Hi,

Under Featured Work title?

Hi!

Yes, the thumbnails under Featured Work.

@tuanphan I should also mention that every thumbnail in the gallery grid opens up a video in a lightbox instead of going to a new page.

This website https://www.steptstudios.com/work/commercial does a cool version with it using a gif instead of a second image.

On 7/5/2023 at 12:32 AM, MisterCampos said:

Hi!

Yes, the thumbnails under Featured Work.

Hover image > Change to another image (or gif) + zoom it a bit?

@tuanphan 

Yes, that is correct! But also allow the video link to still open in a lightbox.

Hi @tuanphan

Checking in to see if this is possible. Thank you for everything.

You can add this to Design > Custom (this code for adidas item), if it works, we will send code for other

div#block-yui_3_17_2_1_1688340999924_3167 .slide:nth-child(1):hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/5e57ff34dff2820a6f1b09bc/1642637298043-7E00F5DJEOOW188O56MG/johnniewalker-short.gif?format=500w);
}

Oh my gosh, this totally worked! I'm embarrassed I couldn't figure this out.

For the rest of them, do I just change the number of the "nth-child(1)" in relation to the slide?

Also, is it possible to add a slightly slower transition, maybe through "ease-in-out"?

Thank you for everything, I really appreciate it.

On 7/11/2023 at 3:56 PM, tuanphan said:

You can add this to Design > Custom (this code for adidas item), if it works, we will send code for other

div#block-yui_3_17_2_1_1688340999924_3167 .slide:nth-child(1):hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/5e57ff34dff2820a6f1b09bc/1642637298043-7E00F5DJEOOW188O56MG/johnniewalker-short.gif?format=500w);
}

 

that code will work when I hover my mouse in the video it will play? @tuanphan

On 8/14/2023 at 12:28 PM, xtianisabsent said:

that code will work when I hover my mouse in the video it will play? @tuanphan

Hi,

This code will replace current image with new image on hover, not make video autoplay

If you need video autoplay, please share link to page where you use video, we can check easier