Переходное изображение при наведении курсора не применяется

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