Bild bei Hover in einem shopify-Shop ändern

Question

Ich habe Probleme damit, dies zu erreichen. Ich möchte das Bild bei Mouseover/Hoover ändern, aber ich kann das nicht zum Laufen bringen.

<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

Dies ist, was ich in einem Shopify Geschäft gemacht haben. Ich musste dies tun, weil seine Bilder unterschiedlich groß waren, aber er wollte, dass alle gleich groß sind.

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