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

Highlighted
I 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
 
and comment below code 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;
}
 
 

Hopefully this will sort things for you

Note : Backup is highly recommended before applying any changes.

0 Likes
New Member
2 0 0

Hi, I was attempting to add this code into my site theclnrs.com + although the hover worked, all products seemed to be behind a dark grey overlay even when mouse was not on any of them.... any idea why this was the case for me? 

0 Likes