How to fix hover issue in Streamline theme product grid?

Technical Q&A
1

I’m working in the Streamline theme and needed to rebuild the product grid item so that on hover it displays the last product image instead of going through the slideshow. I got the whole hover part working but when you click on the image, the image still displays while the next page is loading if you keep your mouse over the image. Here is the product-grid-item code that is updated. I just added classes, “reveal” and “hidden”.


      

          

                {%- if fixed_aspect_ratio -%}
                  

                  

                {%- else -%}
                  {%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
                  
                    
                    
                  

                {%- endif -%}
                
                  {%- if fixed_aspect_ratio -%}
                    

                    

                  {%- else -%}
                    {%- assign slider_image_padding = 100 | divided_by: last_image.aspect_ratio | append: '%' -%}
                    
                      
                      
                    

                  {%- endif -%}

Here is the CSS

.reveal .hidden .lazyloaded { 
  display: block !important; 
  visibility: visible !important;
  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 { 
  position: relative; 
  opacity: 1;
}

.reveal:hover .lazyloaded {
  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 .lazyloaded { 
  z-index: 100000;
  opacity: 1;    
  -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;  
}

.grid-product__tag {
  z-index: 200000;
}

I tried messing around in JS to remove this on click but can’t figure it out

Here is a preview link.

Thanks!

2

Hi @michaelmorgan

I don’t know the reason you set z-index so height, pls change it to 1. It should not be higher than the loading mask layer

Kani_0-1662009494818.png
Kani_0-1662009494818.png1135×334 23.4 KB

.reveal:hover .hidden .lazyloaded {
    z-index: 1;
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

chrome-capture-2022-8-1.gif

3

Can’t believe I didn’t think about that. Works perfectly, thanks!