ショップショップのホバー上の画像を変更する

Question

これを動作させるには問題があります。私はmouseover/hooverで画像を変更したいが、これを動作させることはできない。

<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; 
}