How do I remove the brighter on hover + black border outline effect from product thumbnails?

Store Design
, ,
1

I’m using the Dawn theme.

Currently, when you hover with the mouse over one of the productimage thumbnails on the product page they get brighter. Additionally, the currently selected image has a black outline on the border. I want to remove both of those features.

How can I do that?

Thank you in advance for the help!

2

Hi @maksimcuturilo
Could you share your store URL for further investigation?

Regards,
Vinh

3

Hello,

my store url is studiodekstra.com, and password is “thowsh”

4

Alright, please follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.
  3. Open the assets/sections-main-product.css file and remove these code:
.thumbnail[aria-current] {
    box-shadow: 0 0 0 .1rem rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
}

.thumbnail:hover {
    opacity: .7;
}

.thumbnail[aria-current]:focus, .thumbnail.focused {
    outline: 0;
    box-shadow: 0 0 0 .3rem rgb(var(--color-background)), 0 0 0 .5rem rgba(var(--color-foreground), .5);
}

That’s it.
Please let me know if you have any concern.