how to remove shadow hover effect on products (VENTURE THEME)

Solved
JLbyone
Explorer
189 18 41

On my way to build my store, i wish someone can help me with this, i want to remove that shadow hover effect when it is selected, just the shadow i show you with an image

shadowproduct.jpg

 

JHKCreate
Shopify Partner
2052 334 448

Hello @JLbyone !

Would you mind sharing your store's URL please? We can assist here.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
JHKCreate
Shopify Partner
2052 334 448

Please add this code to your theme.scss file:

.product-card__overlay {
    background-color: transparent;
}

Let me know!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
JLbyone
Explorer
189 18 41

@JHKCreate works really fine! but some issue i found, if you put mobile view when you click some product it show 0.1s to that shadow background, can i remove that ?

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Add the following instead:

.product-card__overlay {
    transition: none;
    background-color: transparent;
}

Let me know!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
JLbyone
Explorer
189 18 41

it still at mobile view, at desktop view its really perfect

0 Likes
JLbyone
Explorer
189 18 41

this is what i meanshadowv2.jpg

 

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Oh this is normal and added by the browser and not the website. You can remove it but it makes your website less open to accessibility: You can see this here https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/

If you really need to it can be removed, let me know

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
JLbyone
Explorer
189 18 41

@JHKCreate wrote:

Oh this is normal and added by the browser and not the website. You can remove it but it makes your website less open to accessibility: You can see this here https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/

If you really need to it can be removed, let me know


@JHKCreate Thanks for the information, I did not know anything about it,

we can taste the difference and see how it looks

0 Likes
JHKCreate
Shopify Partner
2052 334 448

This is an accepted solution.

Add the following code:

:focus {
outline: 0;
}
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com