How can I add a small zoom effect on hover in Debut theme?

mZee
Tourist
30 0 3

Was searching and could not find a proper answer. Right now on Debut when I hover over an image it very slightly darkens the product. How can I change that to a small zoom instead (I saw this on Dawn theme actually). Its more eye appealing. Every topic I saw was about showing a second image but I just want the main image to a have a slight enlargement to it when the mouse is hovering over it. Any ideas? Thank you.

Replies 4 (4)

Sheesh_b
Shopify Partner
513 113 117

Hi @mZee 

Kindly paste the below CSS in theme.liquid under Layout just after <head>

<style>

img:hover {
	transform: scale(1.03) !important;
transition: all 0.3s ease-in-out !important;
}

</style>
We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
mZee
Tourist
30 0 3

nope that doesn't seem to work. I put that right before </head>. Should it be placed somewhere else or is there another code I should try?

Sheesh_b
Shopify Partner
513 113 117

@mZee 

Can you share your website link so I can check further?

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

khgamujtaba
Shopify Partner
42 2 5

Please share your store URL so that analyzation becomes easier

Ahmad M.