Collection - Add a hover effect to product images on your collection pages

Highlighted
Tourist
5 0 5

Hey Phil, I'm back with a more concise answer.

If you copy and paste this in your 'product-grid-item.liquid' below " <div class="grid-product__image-wrapper">" and above "{% if sold_out %}"  you should be better than good!

 

      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
	   <div class="reveal">
        {% if featured_image.src== blank %}


          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          <img class="hidden" src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
  
          {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ featured_image.src | img_url: '1024x' }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            {% if product.images.size > 1 %}
              <img class="product--image lazyload hidden {{ img_id_class }}"
                   data-src="{{ product.images[1] | img_url: 'large'}}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.images[1].aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.images[1].alt | escape }}"
                   data-image>
            {% endif %}
            </div>
          </div>
          
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
         	<img class="hidden grid-product__image" src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
  
         </noscript>
        {% endif %}
  </div>
</a>

For reference this is what my Reveal Module css looks like:

/* ===============================================
// 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: 100000;
  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; 
  }
}
4 Likes
Highlighted
New Member
6 0 0

Hey There, 

 

Thank you for this! It's working for me in the Brooklyn theme, however, some of the hover images just layer on top of the other image, so with two PNGs that have transparent background, I see both images. It also seems to be compressing aspect ratios of some images. Is there a fix in the code, or do I need to adjust my images?

 

Thanks so much!

0 Likes
Explorer
59 4 22

Hello @HeyRay 

Thank you very much for helping us!

I was wondering if can help me with a code for the Supply Theme?

I would be very grateful if you can help me!

Thanks in advance,

Andi

0 Likes
Highlighted
Tourist
4 0 1

Works for me!

0 Likes
Highlighted
Tourist
4 0 1

https://www.youtube.com/watch?v=9uxSrOxxZpY

Follow this video it works for debut theme especially when your featured collection doesn't work

0 Likes
Highlighted

Hi Tyw!

Thanks for the tutorial. Very useful information!

0 Likes
Highlighted
New Member
1 0 0

I've got the code in place for a secondary image to pop up on hover but the original first image is being duplicated on top. Please, someone, answer this. It is infuriating ha. Screenshot Attached.Screen Shot 2020-07-13 at 10.02.24 AM.png

 

0 Likes
Highlighted
Tourist
4 0 1

Well thank you JunePratt!!

This worked like an absolute charm! Sorry for my late reply, with all that's been going on I haven't been around much lately...

While I'm at it, would you mind if I picked your brain about something? We've had a pretty skilled dev working on a shop a while back and he actually managed to set up the hover image by calling it up using the alt-tag of said image. For example, you could use "hover-image" on any desired image and that's the image it'd switch to. Any ideas how that would work?

Also, I went ahead and changed the reveal module ever so slightly for a smoother fade in/out transition only. Ease-in-out seemed buggy somehow (image snaps back to previous instead of fading back out) so I went ahead and used transition all:

 

.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;  
}

 

 

1 Like
Highlighted
Tourist
4 0 1

@Peoni300  is it possible you've pasted the code snippet beneath the already existing image tag instead of replacing it?

0 Likes
Highlighted
New Member
2 0 0

Any one know how to do this for Testament theme? I've entered the code, worked but the images doubled. And I've even tried deleting the old code, but it ended up saying error. 

0 Likes