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

html:

 <div class="categories">
                {{#for product.metafields.about-product.about-product.value as |product|}}
                <div class="category product-images">
                    <a href="{{product.url}}" class="category-a hover_important_productitem">
                    <img src="{{product.featured_image}}" alt="{{product.title}}" class="product-image-1">
                     {{#if section.settings.show_secondary_image}}
                       <img src="{{#if product.images.[1]}}{{product.images.[1]}}{{else}}{{product.images.[2]}}{{/if}}" alt="{{product.title}}" >
                    {{/if}}
                    <div class="category-price-container">
                        <h2>{{product.title}}</h2>
                        <p class="category-price">{{money_with_currency product.price}}</p>
                    </div>
                    </a>
                </div>
                {{/for}}
            </div>

css 内容
 

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

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

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

 .category: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;
 } 

 .category .hover_important_productitem>img+img {
     opacity: 0;
 }

 .category:hover .hover_important_productitem>img+img {
     opacity: 1;
 }

{{#schema}}
     {
   "id": "show_secondary_image",
    "type": "switch",
    "label": "相关商品展示第二张图片",
    "default": true
    },
{{/schema}}