Re: Product Second Image Hover

Solved

How to fix hover issue in Streamline theme product grid?

michaelmorgan
Shopify Partner
32 2 5

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". 

<a
      href="{{ product.url | within: collection }}"
      class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}{% if enable_quick_shop %} quick-product__btn js-screen-open-product-{{ product.id }} js-no-transition{% endif %}"
      data-product-id="{{ product.id }}"
      data-url="{{ product.url | within: collection }}">
      <div class="product-image--wrapper"
           data-id="{{ product.id }}">
          <div class="reveal grid-product__hover-details">
                {%- if fixed_aspect_ratio -%}
                  <div
                    class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
                    data-bgset="{% render 'bgset', image: preview_image %}"
                    data-sizes="auto">
                  </div>
                {%- else -%}
                  {%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
                  <div class="image-wrap"
                    style="height: 0; padding-bottom: {{ slider_image_padding }};"
                    >
                    <img class="grid-product__image lazyload"
                        data-src="{{ img_url }}"
                        data-widths="[750, 900, 1080]"
                        data-aspectratio="{{ preview_image.aspect_ratio }}"
                        data-sizes="auto"
                        alt="{{ preview_image.alt | escape }}">
                    <noscript>
                      <img class="grid-product__image lazyloaded"
                        src="{{ preview_image | img_url: '400x' }}"
                        alt="{{ preview_image.alt | escape }}">
                    </noscript>
                  </div>
                {%- endif -%}
                <div class="hidden">
                  {%- if fixed_aspect_ratio -%}
                    <div
                      class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
                      data-bgset="{% render 'bgset', image: last_image %}"
                      data-sizes="auto">
                    </div>
                  {%- else -%}
                    {%- assign slider_image_padding = 100 | divided_by: last_image.aspect_ratio | append: '%' -%}
                    <div class="image-wrap"
                      style="height: 0; padding-bottom: {{ slider_image_padding }};"
                      >
                      <img class="grid-product__image lazyload"
                          data-src="{{ img_last_url }}"
                          data-widths="[750, 900, 1080]"
                          data-aspectratio="{{ last_image.aspect_ratio }}"
                          data-sizes="auto"
                          alt="{{ last_image.alt | escape }}">
                      <noscript>
                        <img class="grid-product__image lazyloaded"
                          src="{{ last_image | img_last_url: '400x' }}"
                          alt="{{ last_image.alt | escape }}">
                      </noscript>
                    </div>
                  {%- endif -%}
                </div>
          </div>
      </div>

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

      <script>
        var hideEl = document.getElementsByClassName("grid__image-ratio:before");
        var reveal = document.getElementsByClassName("grid-product__link");
        
        function revealHide() {
          for (i = 0; i < hideEl.length; i++) {
            hideEl[i].style.content = "none";
          }
        }

        for (i = 0; i < reveal.length; i++) {
          reveal[i].addEventListener("click", revealHide);
        }
      </script>

 Here is a preview link.

 

Thanks!

Accepted Solution (1)

Kani
Shopify Partner
468 125 232

This is an accepted solution.

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

.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

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Replies 2 (2)

Kani
Shopify Partner
468 125 232

This is an accepted solution.

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

.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

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
michaelmorgan
Shopify Partner
32 2 5

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