How can I remove image borders and create hover effects on my Dawn theme product pages?

[deesamanasa]

Hi there! 

Image borders: I am trying to add photos where I've removed the background (so they're white) on my product pages. When I upload, I see a tiny border surrounding all images - what I'm trying to achieve looks like this. I wonder if it's just from Canva (how I'm removing the background on images) or if there is a setting option in the customizer to remove it. I've included a screenshot of what the line looks like below (see at the bottom and sides). 

Hover on images: I would also love to recreate the hover effect that lifershop.com uses, is this custom coding? I've seen a few examples shared on the discussion boards, but nothing that looks like this - maybe I missed it if so. 

Appreciate any and all help! 

[Made4uo-Ribe]

Hi @deesamanasa ,

Would you mind to share your URL website with password if its protected?

Thanks!

[deesamanasa]

Hi @Made4uo-Ribe looks like I got support below! Thanks so much.

[Made4uo-Ribe]

I understand you can PM me if you dont like to share in public. 

The Hover on Images, on that design you need to hire a Developer to write the code. 

Thanks!

[Zqdo · Accepted solution]

Let's start with the border first. In your theme files, go to Assets -> Base.css, and search for: ".global-media-settings". Under that code, you'll see: 

border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));

What you'll want to do is change that simply to:

border: none;

Let me know if you were able to do this or if you need more help.

[deesamanasa]

Hi @Zqdo ,  

I am going to check on this.

Thank you! 

[Zqdo]

Were you able to fix the issue?

[deesamanasa]

Hi @Zqdo , 

I didn't see the code written out exactly as you shared below: 

border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));

I ended up changing the Border settings under the Theme Settings, see below. There was some % Thickness and Opacity set, so I've put it to 0% and the border was gone! 🙂 

Thank you for your help!