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?
Topic summary
Goal: Add a zoom-on-hover effect in the Dawn theme.
Proposed solutions:
- Two replies suggested adding CSS in base.css to scale images on hover for product cards:
- body .card-wrapper:hover .media.media–hover-effect > img + img { transform: scale(1.1) !important; }
- Optional smooth effect by adding transition to .card-wrapper.underline-links-hover and scaling on hover.
Current outcome:
- The provided CSS did not achieve the desired behavior. The store still shows a magnifying button that requires a click, opening a larger image.
Scope clarification:
- The requester clarified they want hover zoom specifically in the main product page image box (not just product cards/collection tiles). A screenshot was attached to illustrate the target area (image is central to understanding the context).
Status:
- Unresolved/ongoing. Existing code targets .card-wrapper/.media–hover-effect (likely product cards), while the need is for the main product media on the product page. Further guidance or code targeting product page media is needed.
1 Like
Hello! @krishabysakshi Please follow these steps to add this CSS code:
- Go to your Online Store
- Click on “Themes”
- Select “Edit code”
- Open your CSS file. If you have a custom CSS file, open that instead.
- If you can’t find your custom CSS file, open “base.css”
- 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
Hi @krishabysakshi , I hope you are doing well.
- Go to Online Store → Theme → Edit code.
- Open your base.css file
- 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!
Its not working. i still have a zoom magnifying buttin that i need to click and a big image opens up
