css 控制产品图片显示第二张

css内容

 /* hover */
 .product-shop-list-info .product-images {
     display: flex;
     position: relative;
     align-items: stretch;
     --ratio-percent: 100%;
     --image-fill-type: cover;
     --badge-border-radius: 4px;
 }

 .product-shop-list-info .product-images::before {
     content: "";
     width: 0;
     height: 0;
     padding-bottom: var(--ratio-percent);
 }

 .product-shop-list-info .hover_important_productitem img {
     height: 100%;
     object-fit: var(--image-fill-type, cover);
     object-position: var(--image-object-position, center center);
     width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     transition: opacity var(--duration-long) ease;
     transition-property: opacity, transform;
 }

 .product-shop-list-info:hover .hover_important_productitem>img:first-child:not(:only-child) {
     opacity: 0;
 }

 .hover_important_productitem {
     position: absolute;
     bottom: 0;
     top: 0;
     right: 0;
     left: 0;
     overflow: hidden;
     z-index: 2;
 }

 .product-shop-list-info .hover_important_productitem>img+img {
     opacity: 0;
 }

 .product-shop-list-info:hover .hover_important_productitem>img+img {
     opacity: 1;
 }

html内容

<div class="product-images">
   <a href="{{product.url}}" class="hover_important_productitem">
     <img src="{{product.featured_image}}" alt="{{product.title}}"  class="product-image-1">
    {{#if block.settings.show_secondary_image}}
     <img src="{{#if product.images.[1]}}{{product.images.[1]}}{{else}}{{product.images.[2]}}{{/if}}" alt="{{product.title}}" >
     {{/if}}
   </a>
   
</div>

schema内容

{
   "id": "show_secondary_image",
    "type": "switch",
    "label": "t:sections.main-collection-product-list.settings.show_secondary_image.label",
    "default": false
}