Hover effect on products images Supply theme not working properly

Tourist
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/ 

pass:prohff

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}}%;">
              
              <img
                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 }}"
                data-sizes="auto"
                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 }}" />
            </div>
          </div>
        </div>
          <noscript>
           <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;">
         </noscript>

 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

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
68 8 13

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.

29-22-3v0a4-saejg

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

0 Likes