Re: Debut theme small zoom on hover

mZee · ‎12-22-2021

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.

Sheesh_b · ‎12-22-2021

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 · ‎12-22-2021

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 · ‎12-22-2021

@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 · ‎12-22-2021

Please share your store URL so that analyzation becomes easier

Ahmad M.

Re: Debut theme small zoom on hover

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

Community Blog Articles