EZFY Debut theme second image on hover. Replaces snippets/product-card-grid.liquid plus Theme settings schema.

ezfy-debut-hover-settings-schema.json

  ,{
    "name": "Hover Images by EZFY",
    "settings": [
      {
        "type": "checkbox",
        "id": "ezfy_reveal_enable",
        "label": "Enable",
        "default": true
      },
      {
        "type": "select",
        "id": "ezfy_reveal_image",
        "options": [
          {
            "value": "second",
            "label": "Second"
          },
          {
            "value": "last",
            "label": "Last"
          }
        ],
        "label": "Image to show on hover"
      },
      {
        "type": "checkbox",
        "id": "ezfy_reveal_hover_brightness",
        "label": "Remove on hover brightness",
        "info": "By default, Debut makes images brighter when hovering.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "ezfy_reveal_force_aspect_ratio",
        "label": "Force aspect ratio",
        "info": "If the second image has a different width\/height, it will stretch to fill the space.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "ezfy_reveal_transition_animation",
        "label": "Animate transition",
        "info": "Adds a subtle opacity animation when hovering.",
        "default": true
      },
      {
        "type": "range",
        "id": "ezfy_reveal_transition_duration",
        "min": 1,
        "max": 100,
        "step": 1,
        "unit": "ms",
        "label": "Transition duration",
        "info": "Default: 25",
        "default": 25
      }
    ]
  }

ezfy-debut-product-card-grid.liquid

{% comment %}

Show second image on hover - made by ezfycode.com



{% endcomment %}


{% assign enable = settings.ezfy_reveal_enable %}
{% assign image_choice = settings.ezfy_reveal_image %}
{% assign force_aspect_ratio = settings.ezfy_reveal_force_aspect_ratio %}
{% assign remove_hover_opacity = settings.ezfy_reveal_hover_brightness %}

{% assign transition_animation = settings.ezfy_reveal_transition_animation %}
{% assign transition_delay = settings.ezfy_reveal_transition_duration %}
{% assign transition_type = 'ease-in-out' %}


{% assign first_image = ''%}
{% assign secondary_image = '' %}
{% assign total_images =   product.images | size  %}


{% if image_choice == 'second' %}
{% assign secondary_image = product.images[1] %}

{% elsif image_choice == 'last' %}
{% assign secondary_image = product.images.last %}

{% endif %}


<div 
     data-ezfy-reveal-enable="{{enable}}"
     class="EzfyReveal {% if total_images <= 1 %}EzfyReveal--disabled{% endif %} grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
  {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="EzfyReveal-card product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div class="EzfyReveal-padding" style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <div class="EzfyReveal-wrapper" style="--aspect-ratio: {{product.images[0].aspect_ratio}}">
          <img id="{{ img_id }}"
               class="EzfyReveal-image grid-view-item__image lazyload"
               alt="{{ preview_image.alt }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ preview_image.aspect_ratio }}"
               data-sizes="auto"
               data-image>


          {% if enable == true %}
          <img class="EzfyReveal-second-image lazyload"
               loading="lazy"
               data-srcset="{{secondary_image | img_url:'1250x' }} 1227w
                            {{secondary_image | img_url:'1200x' }} 1079w,
                            {{secondary_image | img_url:'1036x' }} 936w,
                            {{secondary_image | img_url:'875x' }} 775w,
                            {{secondary_image | img_url:'700x' }} 600w,
                            {{secondary_image | img_url:'600x' }} 500w,
                            {{secondary_image | img_url:'536x' }} 436w"
               data-src="{{secondary_image | img_url:'456x' }}"
               alt="{{ secondary_image.alt | escape }}"/>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="EzfyReveal-title">
    <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
  </div>
  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>


{% if enable == true %}
<style>
  .EzfyReveal{
    position: relative;
  }

  .EzfyReveal-second-image{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    height: auto !important;
    {% if transition_animation == true %}
    transition: opacity .{{transition_delay}}s {{transition_type}};
    {% endif %}
  }

  /* On Hover */


  .EzfyReveal:not(.EzfyReveal--disabled):hover .EzfyReveal-wrapper::before {
    content: "";
    display: block;
/*     padding-bottom: unset !important; */
  }  

  .EzfyReveal:not(.EzfyReveal--disabled):hover .product-card__image-wrapper{
    margin-bottom: 9px !important;
  }

  .EzfyReveal:not(.EzfyReveal--disabled):hover .EzfyReveal-second-image{
    opacity: 1;
    z-index: 99;
    position: relative;
    {% if transition_animation == true %}
    transition: opacity .{{transition_delay}}s {{transition_type}};
    {% endif %}
  }
  .EzfyReveal:not(.EzfyReveal--disabled):hover .EzfyReveal-image{

    {% if transition_animation == true %}
    animation: .{{transition_delay}}s {{transition_type}} 0s normal forwards customOpacity;
    {% else %}
    opacity: 0;
    {% endif %}
    position: absolute;
    z-index: 1;
  }

  .EzfyReveal-padding,
  .EzfyReveal:not(.EzfyReveal--disabled):hover .EzfyReveal-padding{
    padding-top: 0 !important;
  }

  @keyframes customOpacity{
    0%{opacity:1}
    100%{opacity:0}
  }


  .EzfyReveal-title{
    margin-top: 20px;
    display: block;

  }
  .EzfyReveal-wrapper{
    position: relative;
    margin-left: auto;
    margin-right: auto
  }

  .EzfyReveal-wrapper > :first-child {
    width: 100%;
  }
  .EzfyReveal-wrapper > img {  
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    right: 0 !important;
    bottom: 0 !important;
    object-fit: cover;
    
    {% if force_aspect_ratio == true %}
        height: 100% !important;
    {% else %}
        height: auto !important;
    {% endif %}
  } 
  @supports (--custom:property) {
    .EzfyReveal-wrapper {
      position: relative;
    }
    .EzfyReveal-wrapper::before {
      content: "";
      display: block;
      padding-bottom: calc(100% / (var(--aspect-ratio)));
        }  
  }

  {% if remove_hover_opacity == true %}
  .EzfyReveal-card > *{
    opacity: 1 !important;
  }
  {% endif %}

</style>

{% endif %}