悬停过渡辅助图像未应用

Question

Shopify收藏集页面。我试图将鼠标悬停在产品集合中显示第二个图像，并且已经完成了此操作，但是无法获取悬停过渡元素。

尝试将内联样式添加到PHP文件中的每个元素，并将其添加到CSS中的所有类中，我认为这会影响此过渡。

产品网格项：

        <div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a style="transition: opacity 650ms ease-in-out; moz-transition: opacity 650ms ease-in-out; o-transition: opacity 650ms ease-in-out; " class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images[1] | img_url: grid_image_width }}" alt="{{ product.images[1].alt | escape }}">
    {% endif %}
    <div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">

    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
  </a>
</div>
    </div>

CSS：

.has-secondary.grid-view-item__link img.secondary{
 display:none;
 transition: opacity 650ms ease-in-out;
    -moz-transition: opacity 650ms ease-in-out;
    -o-transition: opacity 650ms ease-in-out;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
 transition: opacity 650ms ease-in-out;
    -moz-transition: opacity 650ms ease-in-out;
    -o-transition: opacity 650ms ease-in-out; 
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
 transition: opacity 650ms ease-in-out;
    moz-transition: opacity 650ms ease-in-out;
    o-transition: opacity 650ms ease-in-out;
}