更改图像在shopify店悬停

Question

我有问题得到这个工作。我想改变鼠标悬停/胡佛上的形象，但我不能得到这个工作。

<div class="image_wrapper"> 
    <div class="image_main"> 
     <a href="{{ url }}">   
      <img src="{% if product.images.size >= 1%}{{ product.featured_image | product_img_url: 'large' }}{% else %}{{ 'No_Image_2.png' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" /> 
     </a> 
    </div> 

{% if product.images.size > 1 %} 
    <div class="image_main_hover"> 
     <img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" /> 
    </div> 
{% endif %} 

Answer 1

这是我在shopify商店一样。我必须这样做，因为他的图像大小不同，但他希望它们的大小相同。

<div class="imgs" style="background-image: url('{{ product.featured_image.src | img_url: 'grande' }}');"> 
    {% if product.images.size > 1 %} 
      <div class="imgs2" style="background-image: url('{{ product.images[1] | product_img_url: 'grande' }}')"></div> 
    {% endif %} 
</div> 

CSS

.imgs { 
    width: 100%; 
    height: 600px; 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size: cover; 
position: relative; 
    overflow: hidden; 
} 

.imgs2 { 
    opacity: 0; 
    width: 100%; 
    height: 600px; 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    transition: all 0.5s; 
} 

.imgs:hover .imgs2 { 
    opacity: 1; 
    transition: all 0.5s; 
}