I am facing an issue with a page that displays product images. Whenever I hover over an image, it enlarges slightly but the max-height remains unchanged. To enhance this effect, I want the image to fade out on all sides rather than showing a white background. The challenge is that the image is clickable, so adding another div on top for the fade effect is not possible. Can anyone suggest a CSS solution to achieve this?
Here is the HTML code:
<li class="product">
<article class="card ">
<figure class="card-figure">
<a href="/audio-technica-pro-31/">
<img class="card-image lazyautosizes lazyloaded" data-sizes="auto" src="https://cdn2.bigcommerce.com/server2400/7659a/images/stencil/500x659/products/1190/1191/pro_31_1__34951.1294215822.jpg?c=2" data-src="https://cdn2.bigcommerce.com/server2400/7659a/images/stencil/500x659/products/1190/1191/pro_31_1__34951.1294215822.jpg?c=2" alt="Audio Technica PRO 31" title="Audio Technica PRO 31" sizes="58px">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<a href="#" class="button button--small card-figcaption-button quickview" data-product-id="1190">Quick view</a>
<label class="button button--small card-figcaption-button" for="compare-1190">
Compare <input type="checkbox" name="products[]" value="1190" id="compare-1190" data-compare-id="1190">
</label>
<a href="/cart.php?action=add&product_id=1190" class="button button--small card-figcaption-button">Add to Cart</a>
</div>
</figcaption>
</figure>
<div class="card-body">
<p class="card-text" data-test-info-type="brandName">Audio Technica</p>
<h4 class="card-title">
<a href="/audio-technica-pro-31/">Audio Technica PRO 31</a>
</h4>
<div class="card-text" data-test-info-type="price">
<div class="price-section price-section--withoutTax ">
<span data-product-price-without-tax="" class="price price--withoutTax">$52.99</span>
</div>
</div>
</div>
CSS applied:
.card{
&:hover{
.card-image{
opacity:.75;
transform: scale(1.05);
}
}
}