How do i put a feature of Image on Zoom on Hover for a Picture on my website ?

[Abhishek_1995]

Hello ! I have been looking for a solution for a long time on Shopify on how to put a feature of Image Zoom on hover for one of the main pictures on my homepage. The website link is here :- https://st-james-feelgood.myshopify.com/.

You will find the image down below as you scroll down. It contains a picture of body parts.

I would appreciate if someone could tell me the source code for making this change on my CSS and Html so that i can implement it right away. Thanks

[Simonsron]

.ss-gallery_all-item{
overflow:hidden;
}
.ss-gallery_all-item a img{
transform:scale(1);
transition: .2s;
}
.ss-gallery_all-item a img:hover{
transform:scale(1.1);
transition: .2s;
}

Is this what you mean by image scaling?

You can put these code in base.css

I modified the following section：