How to Show Product 2nd image on hover for Minimal theme

Highlighted
 wanted to display products second available image when hover over product grid in minimal theme

Here is what worked for me

1) Go to Snippets > product-grid-item.liquid file

comment using {% comment %} and {% endcomment %} tags

 

<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
    <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
        <img id="{{ img_id }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img lazyload"
            data-src="{{ img_url }}" data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="{{ featured.featured_image.aspect_ratio }}" data-sizes="auto" data-image>
    </div>
</div>

 

and add below code

 

<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
    <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
        <img id="{{ img_id }}" class="product__img reveal" src="{{ featured.featured_image | img_url: 'large' }}"
            data-src="{{ img_url }}" data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="{{ featured.featured_image.aspect_ratio }}" data-sizes="auto"
            alt="{{ featured.featured_image.alt | escape }}">
        <img id="{{ img_id }}" class="product__img hidden" src="{{ product.images[1] | img_url: 'large' }}"
            data-src="{{ img_url}}" data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="{{ product.images.last.aspect_ratio }}" data-sizes="auto"
            alt="{{ product.images[1] | escape }}">
    </div>
</div>

 

 

2) Include CSS to Assets > theme.scss.liquid file

 

/*============================================================================
  Show Product 2nd image on hover css
==============================================================================*/
.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 5;
  opacity: 1;   
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

.reveal {
  position: static;
}

 

 

Note : Backup is highly recommended before applying any changes.

0 Likes