How To Stop Image Preview Being Zoomed In? (Refresh Theme)

[wderge3rt54]

My product previews are getting zoomed in and zoom in even more when you hover over them on desktop.

I would like to disable both of these features and just have the image displayed in it's full, regular size.

You can check my site freundapparel.com and see the socks I just posted are zoomed in on the home page.

[EBOOST]

hi @wderge3rt54 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Copy code below to bottom of file

.card:hover .media.media--hover-effect>img:first-child:only-child, 
.card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
	transform: none!important;
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

[wderge3rt54]

This fixed the zoom on mouse hover, however the initial zoom on the product preview is still there. I mostly want to fix this initial zoomed version that the product is displayed at, it looks horrible. 

So please if you have a code that makes it so the product preview is not zoomed in when displayed.

[GemPages]

Hello @wderge3rt54 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

<style>
   .card__media img{
     transform: scale(1) !important;
  }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[wderge3rt54]

I didn't say anything about wanting to change the color, I want to change the zoom in on my product previews on the home page. And the zoom on hover.

[GemPages]

@wderge3rt54 

Sorry, I have updated the answer again and removed the zoom image on the Refresh theme when hovered

[wderge3rt54]

My main issue is the initial zoom that the preview is displayed at even without the hover. The hover i would also like to possibly get rid of, but does not bother me as much.

Please just let me know how can I make it so the product preview thumbnails are not zoomed in (I don't mean when you hover, just when you load the page)

Thank you. 

[EBOOST · Accepted solution]

hi @wderge3rt54 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Copy code below to bottom of file

.card__media .media img {
  object-fit: contain!important;
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

[wderge3rt54]

thanks this did what I needed 🙂

[mxaxm]

hi EBOOST - I am trying to turn off the automatic slight magnification/zoom on all my 

photos in the Craft theme. 

I tried adding your suggested code, but it did not turn off this feature. 

Would you take a look at my website Moira California https://moiracalifornia.com/

password: tylerfoote

To see if you have recommendation on how to change this code 

Thank you, Moira

[mxaxm]

P.S. I am new to adding code to files. Would you guide me about where to put the code

- inside or outside existing brackets?

thank you

[EBOOST]

Hi @mxaxm,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

.card__media .media img {
  object-fit: contain !important;
  transform: scale(1) !important;
}

[VmA]

Hi @EBOOST 

I am trying to find the 2. Assets/base.css? 

I've attached screen shots to explain my process so far. Can you please let me what i'm doing wrong.

Thanks in advance,
Will

[EBOOST]

Hi @VmA ,

Which theme are you using? Some old themes or Fee themes will not have this file. Could you share your store URL? I will help to find it for you.

[VmA]

Hi @EBOOST 

Our URL is www.vicotoriametalbert.com we are currently on theme Flow 31.0.7 from https://www.eightthemes.com/

Thanks
Will

[EBOOST]

Hi,

For Flow theme. You can add to Assets/theme.min.css.