CSS - 悬停时更改图像？

Question

我正在使用 shopify 主题，当用户将鼠标悬停在产品图片上时，我正尝试在产品图片顶部显示“添加到购物车”按钮。也就是说，“悬停”方面已经在使用以下 CSS 的产品图像上处于活动状态。简而言之，当我当前将鼠标悬停在产品图片上时，它只是将不透明度降低到 0.7。也就是说，如果我希望按钮或图像出现在悬停上，我似乎无法弄清楚如何为 .grid-product__image-link 编写 HTML？感谢您的帮助！

当前 HTML

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link{% unless featured_image.src == blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
        {% if featured_image.src == blank %}
   
        <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
   
        
          {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
  
                
           <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
  
             
        </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}
    </div>

CSS

.grid-product__wrapper {
  text-align: center;
  margin-bottom: $gutter;

  .grid-collage & {
    margin-bottom: 0;
  }
}

.grid-product__image-wrapper {
  position: relative;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.grid-product__image-link {
  position: relative;
  display: block;
  width: 100%;
  background-color: $colorProductBackground;
  @include transition(opacity 0.4s ease-out);

  .grid-collage & {
    padding: 0 20px;
  }

  &:hover, 
  &:focus {
    opacity: 0.7;
    @include transition(opacity 0.15s ease-in);
  }

}

Answer 1

我会使用 javascript 来制作另一个 html <img> 或 <button> 元素弹出窗口，当您的鼠标放在该图像上时，它具有更高的 z-index 属性，但我不确定这是否适合您。

Answer 2

如果我正确理解你，也许这会对你有所帮助:)

HTML：

   <a class="grid-product__image-link>
       <div class = "product-overlay"></div>
   </a>

文字：

.grid-product__image-link {
  position: relative;
  display: block;
  width: 100%;
  background-color: $colorProductBackground;
  @include transition(opacity 0.4s ease-out);

  .grid-collage & {
    padding: 0 20px;
  }


  .product-overlay{
    display:none;
  }

  &:hover, 
  &:focus {
    opacity: 0.7;
    @include transition(opacity 0.15s ease-in);
    
    .product-overlay{
        display:block;
    }
  }
}