0

我有一个页面，其中包含带有图像的产品列表。当我将鼠标悬停在图像上时，图像会略微放大，但max-height不会改变。因此，我想让图像在所有四个方面都淡出。目前，我使用的是白色背景，但理想情况下，淡出将通过减少opacity而不是白色来完成。我遇到的问题是图像是可点击的，所以我不能在它上面使用另一个 div 来创建淡入淡出效果。如何在图像上使用 CSS 来做到这一点？

HTML：

<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&amp;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：

.card{
    &:hover{
        .card-image{
            opacity:.75;
            transform: scale(1.05);
        }
    }
}
4

1 回答 1

0

你试过这个吗？

.card-image {
  opacity: 1;
  transition: all 1s ease;
}

.card-image:hover {
  opacity: 0.75;
  transform: scale(1.05);
}

于 2017-07-17T14:35:08.653 回答