ZOOM ON HOVER EFFECT

[krishabysakshi]

https://www.krishabysakshi.com/ This is my website and i want to add zoom on hover effect on my products in dawn basic theme. How can i add the effect?

[Huptech-Web]

Hello! @krishabysakshi Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body .card-wrapper:hover .media.media--hover-effect>img+img {
    transform: scale(1.1) !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[krishabysakshi]

Its not working. i still have a zoom magnifying buttin that i need to click and a big image opens up

[krishabysakshi]

Talking about this hover and zoom in a box of main product page.

[steve_michael2]

Hi @krishabysakshi , I hope you are doing well. 

1. Go to Online Store -> Theme -> Edit code.
2. Open your base.css file
3. Paste the below code in it and save

body .card-wrapper:hover .media.media--hover-effect>img+img {
    transform: scale(1.1) !important;
}

Or if you want it with a transition effect, then kindly use the below code

.card-wrapper.underline-links-hover {
    transition: .5s !important;
}

.card-wrapper.underline-links-hover:hover {
    transform: scale(1.1) !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!