Добавить функцию наведения на изображение продукта

В вашем CSS много чего происходит, но если я правильно понимаю ситуацию, вы хотите добиться эффекта, подобного тому, который показан в этот Codepen, верно?

В вашем CSS абсолютно разместите два изображения внутри div (с top: 0px и left: 0px) и измените непрозрачность верхнего изображения в стеке, наведя курсор на родителя.

HTML:

<div class='reveal'>
  <img src='image_src' class='bottom'>
  <img src='image_src' class='top'>
</div>

CSS:

.top, .bottom {
  position: absolute;
  opacity: 1;
  top: 0px;
  left: 0px;
}

.frame:hover .top {
  opacity: 0;
}

РЕДАКТИРОВАТЬ: Реализация с сеткой, как и требовалось.

HTML:

<div class='grid'>
    <div class='reveal'>
      <img src='image_src' class='bottom'>
      <img src='image_src' class='top'>
    </div>
    <div class='reveal'>
      <img src='image_src' class='bottom'>
      <img src='image_src' class='top'>
    </div>
</div>

CSS:

.grid {
  display: flex;
  flex-wrap: wrap; /*makes the grid "responsive"*/
}

.reveal {
  display: flex;
  flex: 1 1 200px; /*last value must be picture width*/
  height:200px; /* picture height*/
  margin: 20px; /*aesthetic only*/
  position: relative;
}

.top, .bottom {
  position: absolute;
  opacity: 1;
  top: 0px;
  left: 50%; /*centers pictures inside flex children (.reveal divs)*/
  transform: translate(-50%, 0); /*see above*/
}

.reveal:hover .top {
  opacity: 0;
}

Демонстрация на Codepen

В приведенном выше примере используется flexbox для создания простой сетки, которая будет работать с (слегка измененными) .reveal div из моего исходного сообщения. Если вы не знакомы с синтаксисом flexbox, я настоятельно рекомендую отличный бесплатный видеокурс от Уэса Боса.

P.S. Обратите внимание, что сетка будет работать «из коробки» только в том случае, если изображения имеют заданную ширину в пикселях, хотя вы можете легко поддерживать изображения разных размеров с помощью небольшой магии медиа-запросов.

Получил, чтобы работать со следующими

В CSS у меня был @media (hover: hover) {}, чтобы пользователям не приходилось дважды щелкать изображение на мобильном устройстве, чтобы перейти на страницу продукта.

CSS:

/* ===============================================
// Reveal module
// =============================================== */
@media (hover:hover) {
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

@media (hover:hover) {
.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}
}

@media (hover:hover) {
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

Изменен HTML / Liquid product-card-grid.liquid на следующее:

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a 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.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
  </a>
</div>

<div class="h4 grid-view-item__title">
     <a href="{{ product.url | within: collection }}"> {{ product.title }} </a>
</div>   
{% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
 <div class="grid-view-item__meta">
   <a href="{{ product.url | within: collection }}"> {% include 'product-price', variant: product %} </a>
    </div>