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

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

Abhishek_1995
Visitor
1 0 0

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

 

Reply 1 (1)

Simonsron
Shopify Partner
699 87 122
.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:

Simonsron_0-1673581909162.png

 

banned