Hover effect on products images Supply theme not working properly

9 0 1

Hello, I had used the tutorial from this linkhttps://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo... however, hover effect on products images doesn't seem to work as it should, like the second image always appear on top of the "VANDUT" label.

website: https://perfectprintshot.ro/ 


also where I put my product-grid-item.liquid code

  <div class="reveal">
          <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px"> 
            <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                class="lazyload no-js"
                data-src="{{ img_url }}"
                data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                alt="{{ image.alt | escape }}"
                {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>
              <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
           <img src="{{ image | img_url: '580x' }}"
             srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
             alt="{{ image.alt }}" style="opacity:1;">

 and my css code from the same tutorial placed in theme.scss.liquid : (exept z-index with green i change it to 100)


/* ===============================================
// Reveal module
// =============================================== */

.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: 100;
  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; 

Can you please tell me what did I do wrong with my code? Thanks



Shopify Staff
Shopify Staff
1094 124 170

Hi @JosephO,

Hank here from Shopify.

I have looked at the tutorial you have followed which I can see is an advanced tutorial that would not be supported by Shopify.


Hopefully, someone with more technical skills in the community will come across this and be able to add some value to you here, but if not, your best bet might be to reach out to one of our Shopify Experts, who you can hire to do almost any custom work on your store. If you were to reach out to them about this query, they would be able to resolve this issue for you.

All the best, Hank

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

New Member
6 0 0


Hi Joseph,

I had problems with hover mouse display 2nd image.

I saw that you got yours fixed in supply theme.

Can you please share your solution?

Thanks in advance