Custom effect to enlarge image upon hover?

Hello - I used separate image blocks to create this row of logos. They will all link out to their corresponding websites. I would like these icons to enlarge when hovered over and make a sound or perhaps to change color. I'm open to suggestions. Does anyone know the custom code for this? Sadly there is not an option to animate or do this directly through editing the image. 

The site is not live but here is the info:

Site: https://dachshund-rose-rtth.squarespace.com/

PW: hello2024

Thank You!

I used this code in the custom css section but it hasn't worked for some reason: 

.thumb-image {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumb-image:hover {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.thumb-image {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

Thank you @tuanphan!!!!!!!! That worked perfectly.

Hi @tuanphan - is there a way to code this so every image on the page with an outgoing link enlarges? I have a section where there is a mix of image blocks with no outgoing link and some with. The and social media links are what I would like to have animation (in other sections, I also have the social links). Ideally I would like those with a link to have a hover effect to show its clickable.

Site: https://dachshund-rose-rtth.squarespace.com/

PW: Help2024

Section referenced: section[data-section-id="66d9db9d754e4b7143f41677"]

Thank you for your help! 

On 9/7/2024 at 10:21 PM, RAMPDigitalMedia said:

Hi @tuanphan - is there a way to code this so every image on the page with an outgoing link enlarges? I have a section where there is a mix of image blocks with no outgoing link and some with. The and social media links are what I would like to have animation (in other sections, I also have the social links). Ideally I would like those with a link to have a hover effect to show its clickable.

Site: https://dachshund-rose-rtth.squarespace.com/

PW: Help2024

Section referenced: section[data-section-id="66d9db9d754e4b7143f41677"]

Thank you for your help! 

 

Help2024

Password is incorrect. Can you check it again?

You can also try this code

.image-block:has(a):hover {
    transform: scale(1.3);
    transition: all 0.3s ease;
}
.image-block {
	transition: all 0.3s ease;
}