Removing background on product card overlay Venture theme

dannygdesigns
New Member
3 0 0

I have been trying to find a way to remove the background box that appears when hovering over a product card. I still want it to overlay a darker opacity on hover but without the box that surrounds the image. please see screenshot for reference.

 

Screenshot 2021-02-15 at 16.57.36.jpg 

0 Likes
Pallavi
Shopify Expert
721 92 103

Hello There,

Please share your store URL.
So that I will check and let you know the exact solution here.

Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
dannygdesigns
New Member
3 0 0
0 Likes
Pallavi
Shopify Expert
721 92 103


Hello There,

add code assets/theme.scss.liquid bottom of the file

.product-card__overlay {
background-color: initial!important;
}
.product-card__image.js:hover img {
opacity: 0.8!important;
}


Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
dannygdesigns
New Member
3 0 0

Okay thanks now a few issues:

1) now the hover opacity seems to just flash in a split second and go off 

2) the product title looks a tad too far away from the image 

3) the sale tag still thinks the bounding box is there so now is not in line or over the image

0 Likes