How to remove image zoom on hover

[Igdaliah]

Hi

I need to remove the zoom on hover effect on products across my website. it happens on the home and collections pages. It cuts off the models head.

I’m currently using Tagia theme.

Here’s the preview link:

https://igdalyah.com/?_ab=0&_fd=0&_sc=1

Thanks in advance!!

[steve_michael2]

Hi @Igdaliah

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

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[rajweb]

Hey @Igdaliah ,

To remove the zoom-on-hover effect in the Tagia theme, you’ll need to modify the CSS responsible for this behavior. Follow these steps:

1. Online Store

2. Themes

3. Edit Code

4. Locate the CSS file. It’s typically found under Assets and might be named something like theme.css , base.css, or similar.

5. Add Custom CSS:

• Open the CSS file and scroll to the bottom.

• Add the following code to disable the zoom effect:

.product-card__image-wrapper:hover img,
.collection-grid__item:hover img {
    transform: none !important;
    transition: none !important;
}

Refresh your website to see the changes. The zoom effect should now be removed on both the home page and collection pages.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Igdaliah]

There is no base or theme css file under assets for Tagia compared to Dawn theme. is there anywhere else it can be?

[rajweb]

@Igdaliah ,

you can add custom CSS directly in the theme.liquid file if your theme doesn’t have a dedicated CSS file or a custom CSS field in the settings. Here’s how to safely add CSS to theme.liquid:

Steps to Add CSS in theme.liquid:

1. Online Store > Themes > Edit Code

2. Open the theme.liquid file under the Layout folder.

3. Insert Custom CSS:

• Locate the section in the theme.liquid file. This is where styles and scripts are typically loaded.

• Add your custom CSS between tags, just before the closing tag, like this:

Refresh your website and hover over product images to confirm the zoom effect is removed.

Thanks

[steve_michael2]

Hi @Igdaliah ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.grid__item:hover img {
    transform: none !important;
}

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

If you are happy with my help, you can help me buy a COFFEE

Thanks!