Showing Original image Underneath Hover image (Avone Theme)

Store Design
1

Good Day!

Disclaimer: This site contains adult products

When you hover over an image that displays in the “related products” section of the website, or after searching for a product, the original image is still viewable underneath the alternate image, when hovering. How do I remove the original image completely when hovering or decrease it’s opacity to make it appear more faded in the background?

If you scroll all the way to the bottom of this page and scroll all the way to the bottom, when you hover over the products under the "Lust Over (related products) section), you can still see the original image.

Thank you in advance!

Screen Shot 2022-02-04 at 7.53.41 AM.png
Screen Shot 2022-02-04 at 7.53.41 AM.png668×590 128 KB

Screen Shot 2022-02-04 at 7.53.36 AM.png
Screen Shot 2022-02-04 at 7.53.36 AM.png676×714 38.5 KB

2

Hi @Snohx

In your theme.css file locate the following code and remove it completely:

@media only screen and (min-width: 1025px)
{
.grid-view-item.style4:hover .grid-view_image:hover .primary {
    opacity: 1;
}
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!