CSS 帮助 - Shopify Blockshop 主题集合页面替代图像悬停更改

Question

已编辑 Maddy - 非常感谢，下面的问题非常适合问题 1 和 3，很高兴学会了如何做到这一点。 关于 #2 - 在下面编辑我的原件。

///从这里开始///

需要在此站点的集合页面上修复以下问题，以下是其中一个集合页面的示例： http://www.sachinandbabi.com/collections/tops

1. 移除悬停时的不透明度
2. 对于 267 像素宽的缩略图，鼠标悬停时的 alt 图像显示偏移。示例：基努上衣。 需要解决这个问题。 编辑：添加屏幕截图链接以显示正在发生的事情 - 对于 267 PX 宽的拇指，悬停图像在原始拇指左侧显示 43PX，它应该出现在鼠标悬停上，直接在原始图像上方至于隐藏原始图像。

链接： https://drive.google.com/file/d/0Bxyx2FFWzBJjRGhCVVlBR1dadWs/view?usp=sharing

1. “SALE”和“SOLD OUT”圆圈需要出现在鼠标悬停状态

我尝试自己解决此问题，但遇到了问题。如果有人能够提供帮助，并且我需要提供更多信息，请告诉我，以便我将其发送过来。

下面是我的 style.css.liquid 中的模块和图像包装器。谢谢大家。

/* ===============================================
// 4.10 Reveal module
// =============================================== */
 
.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: auto; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: auto;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}
 
@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}




/*Here's the image wrapper from snippet-product-item.liquid*/

  <div class="product-item {{ column-classes }}">
    <div class="image-wrapper">
          {% if product.available == false %}
        <div class="circle sold-out">Sold<br />Out</div>
      {% elsif product.compare_at_price > product.price %}  
        <a class="circle sale" href="{{ product.url | within: collection }}">Sale</a>
      {% endif %}   
      {% assign ratio = settings.product_img_w_to_h_ratio | times: 1.0 %}
      <a href="{{ product.url | within: collection }}">
        {% if snippet-product-item == '3' or ratio < 1 %}
       <div class="reveal">
        <img {% if product_slider %}class="lazyOwl" data-src="{{ product.featured_image.src | product_img_url: 'large' }}"{% endif%} src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
        {% else %}
        <img {% if product_slider %}class="lazyOwl" data-src="{{ product.featured_image.src | product_img_url: 'medium' }}"{% endif%} src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}" />
        {% endif %}
        {% if snippet-product-item == '3' or ratio < 1 %}
         <img class = "hidden" {% if product_slider %}class="lazyOwl" data-src="{{ product.images[2] | product_img_url: 'large' }}"{% endif%} src="{{ product.images[2] | product_img_url: 'large' }}" alt="{{ product.images[2]alt | escape }}" />
        {% else %}
        <img class = "hidden" {% if product_slider %}class="lazyOwl" data-src="{{ product.images[2] | product_img_url: 'medium' }}"{% endif%} src="{{ product.images[2] | product_img_url: 'medium' }}" alt="{{ product.images[2]alt | escape }}" />
        {% endif %}      
        </div>  
       </a>
    </div><!-- .coll-image-wrap -->

Answer 1

你必须对你的 css 做一些改变：-

对于不透明度：-

 .product-grid .image-wrapper {
        display: inline-block;
        max-width: 100%;
        opacity: 1 !important; // add this in your css
        position: relative;
        width: 100%;
    }

对于“SALE”和“SOLD OUT”圈子-

.reveal {
    position: relative;
    z-index: 1; // add this in your css
}

.product-grid .circle {
    font-size: 1.16667em;
    height: 90px;
    padding: 35px 0 0;
    right: 15px;
    top: 15px;
    width: 90px;
    z-index: 2; // add this in your css
}

图像悬停变化：-

.reveal .hidden {
    height: 100%;
    left: 10px;  // Change this in your css
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease-in-out 0s;
    width: auto;
    z-index: -1; }