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

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

You can add a hover effect to your product images on the home page and on collection pages. When a customer moves the cursor over a product image, the image will change to show either an alternate product image, custom text, or a combination of the two:

Add CSS to your stylesheet

To add a hover effect, you will need to add some CSS code to your theme's stylesheet:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.css.liquid. If your theme doesn't have a theme.css.liquid file, then click styles.css.liquid, or another file with a .css.liquid file extension.
4. At the very bottom of the file, paste this code hosted on GitHub.
5. Click Save.

Edit the code for your product images

To edit the code for your product images:

1. In the Snippets directory, click product-grid-item.liquid.
   If your theme doesn't have a product-grid-item.liquid file, then look for one of the following:
   
   
   • product-card.liquid
   • product-card-grid.liquid
   • product-loop.liquid
     
     
2. Find the HTML img tag for your product images by searching for <img. The code for the tag varies theme to theme, but always starts with <img, and ends with either > or />. It might look similar to this:
   
   

   <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">

3. On a new line above the img tag, paste the following code:
   
   

   <div class="reveal">

   
   On a new line below the img tag, paste the following code:
   
   

   </div>

   
   The result should look like this:
   
   

   <div class="reveal">
   <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">
   </div>

4. On a new line below the img tag and above the closing </div> tag, add the code that changes what is shown on hover. The code that you add will vary depending on whether you want to show an alternate product image, custom text, or a combination of the two. Follow the steps for the customization of your choice.

Show an alternate product image on hover

1. On a new line below the img tag and above the closing </div> tag, paste the following code:
   
   

   <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />

   
   Your code should look like this:
   
   

   <div class="reveal">
     <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag -->
     <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
   </div>

2. Click Save.

Show custom text on hover

1. On a new line below the img tag and above the closing </div> tag, paste the following code:
   
   

   <div class="hidden">
     <div class="caption">
       <div class="centered">
       YOUR TEXT
       </div><!-- end of .centered -->
     </div><!-- end of .caption -->
   </div><!-- end of .hidden -->

   
   Replace YOUR TEXT with the text of your choice. You can use HTML and Liquid tags, for example:
   
   

   <div class="hidden">
     <div class="caption">
       <div class="centered">
         <p>{{ product.title }}</p>
         <p>{{ product.price | money }}</p>
       </div><!-- end of .centered -->
     </div><!-- end of .caption -->
   </div><!-- end of .hidden -->

   
   The example code above shows the title and the price of a product when you hover over the image.
   
   Your code should look like this:
   
   

   <div class="reveal">
     <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag -->
     <div class="hidden">
       <div class="caption">
         <div class="centered">
           YOUR TEXT
         </div><!-- end of .centered -->
       </div><!-- end of .caption -->
     </div><!-- end of .hidden -->
   </div><!-- end of .reveal -->.

2. Click Save.

Show an alternate product image with custom text on hover

1. On a new line below the img tag and above the closing </div> tag, paste the following code:
   
   

     <div class="hidden">
       <img src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
       <div class="caption">
         <div class="centered">
           YOUR TEXT
         </div><!-- end of .centered -->
       </div><!-- end of .caption -->
     </div><!-- end of .hidden -->

   
   Your code should look like this: 
   
   

   <div class="reveal">
     <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag -->
     <div class="hidden">
       <img src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
       <div class="caption">
         <div class="centered">
           YOUR TEXT
         </div><!-- end of .centered -->
       </div><!-- end of .caption -->
     </div><!-- end of .hidden -->
   </div><!-- end of .reveal -->

2. Click Save.

 

Demo store

Click here to view a demo store that has product images with a hover effect.

[JaimeRosales]

Ok I found my solution to the error mentioned above. 

I'm using Brooklyn. 

Here is the before. there is no space between 'featured_image.src' and  '==' in both mentions of the code below. 

<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 %}

This is the working solution. 

<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 %}

EDIT: Ok so it seems this website (The Forum) when I add the space on the 2 locations where it needs to be added it returns to to be without the space, I have seen other solutions like that so that could be the reason why I was not able to find it before. 

Just add the spaces and you will be good to go. Cheers!

[Pun]

Hello gurus,

may i know why my hover image is not centralised?

.reveal {
  position: absolute;
  top: 0;
  margin-left:auto;
  margin-right:auto;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-height: 345px;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

[Yana22]

Hi,

do you maybe have also a solution for the minimal theme? 

[ready_golfer]

@JunePratt 

It works for me. Thanks!

[Andogagra]

Hi Tyw!

Thanks for the tutorial. Very useful information!

[Peoni300]

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.

[k1p57a]

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

[SusieFromJurate]

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. 

[animusfilmco]

Hey there. I had this same issue at first. You'll need to make all of your
images jpegs, so that the backgrounds are white. I used SEO Image Optimizer
- Tiny IMG to automatically reformat all of my photos to jpeg. It's also a
great tool for SEO optimization as it renames your photo files for you to
match searches.

[JimmyNguyen]

Hi Ty,

I couldnt find the file liquid for "all the product" grid that I can edit on the code.

Could you assist with this enquiry?

[getyourbirdseed]

Can someone give a clear, concise, and complete solution for the implementation of this code on Brooklyn? One of my biggest design barriers are changing the hover style on this theme. There already is one, it dims the images upon hover, how difficult can this be?

A big thanks to whoever nails it down ahead of time!

[SateNL]

Anyone got this working for the Narrative theme? 

[Twooogirlsco]

Hi, 

I have done all the mentioned steps but the images on my shop still do not change with the hover effect. At most the images have a slight opacity overlay but they do not change to the other custom image.

Please help!

[FXCHROMA]

Hi I am stuck trying to get this to work for the Venture theme. Do you have a workaround? I would like to use the effect on my feature products on the homepage. Many thanks.

[Elizabeth01]

I'm not sure if it will work for Venture theme but this video worked well for me on Debut https://www.youtube.com/watch?v=9uxSrOxxZpY maybe you can try it

[FXCHROMA]

Thanks Elizabeth it worked to a certain extent but it wouldn't show the price and description 😞

[Elizabeth01]

Mmm...so you want to show your price and description on hover too? You can
look for an app on the Shopify App store for preview, and when you click on
the preview link people will see the price, description, pictures, etc, and
the more information link to go to the product page. There are some free
apps just make sure it works well on desktop and mobile. So you complement
this hover option with the preview for more info.

I hope it helps 🙂

[FXCHROMA]

Thanks i mean when I installed the code the descriptions and prices atthe bottom went missing. This is what it looks like: https://fxchroma.co.uk/collections/all

[alisonhui]

I'm using the simple theme, how can I add the hover effect and show another image?

Thanks.

[pamelasfeir]

 hello thank you this was helpful but it actually gave me something that looks like this

[iq180]

Is there a solution to Supply theme?

I tried the original code but then nothing happens when I hover over, but instead it messed up the images that covers the price underneath.

Please help!

Thanks in advance.

[jordae]

Hello,

Is this still working in 2021 ? I can't find the "<img src" in my product-card-grid.liquid

I'm on Debut theme (v 17.12.0)

I've tried an alternative way from this post, the mouse hover works but there's "no image" instead of my products first photo

[jordae]

Hello,

Is this still working in 2021 ? I can't find the "<img src" in my product-card-grid.liquid

I'm on Debut theme (v 17.12.0)

I've tried an alternative way from this post, the mouse hover works but there's "no image" instead of my products first photo

[daughterscandle]

Hi tried several times to implement this coding myself but just can't achieve the mouse roll-over effect that we're after willing to pay unto £100 to get this fixed!

we're using the "minimalist" theme on our store.

[helppls]

Folllowed these steps on the Brooklyn theme, triple checked it all and nothing changed. Help?

[wmiz]

Hi all, I made a video tutorial for this solution using the Venture theme. Thought it might be useful if anyone is having trouble implementing the feature in this post. The main change is that you edit product-card.liquid instead of product-grid-item.liquid.

[Yessenia_Tseng]

i made it work. however i have all these coding on the footer of every page now. Please help me get rid of this

 

[Fotis]

Can you send us the css code so the transition to the 2nd image become smoother?

[ezenails]

It didn't work on me!

[klooney]

Hi all,

To anyone trying to get this to work properly on the Venture theme, here is what I did. Now before you start getting into this, here is what I was actually trying to accomplish, so if you wanted to do something different you might still need to make some adjustments. On the Venture theme, when you hover on a product image, a box pops up that says 'View' and I wanted to get rid of that box and instead have an alternate image of the product show up instead. So here's what I did.

I used all of the code from the original post on this topic and then made these changes in the theme files:

Snippets > product-card.liquid:

Go to line 16 and either delete or quote out the block of code that starts right under "product-card__image js". Also, go down to where you added the "reveal" div from the code in the original post in this thread and quote out the "noscript" opening and closing tags.  Then go down to the bottom and quote out the "product-card__overlay" code at the bottom of the page. So, your code should look something like this now:

<!-- /snippets/product-card.liquid -->

{% comment %}
  The product card snippet is passed a liquid object, used in this file
  as "product". The object is either "product" or "item", the latter if
  it is from search results.
{% endcomment %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<a href="{{ product.url }}" class="product-card">
  {% assign image = product.featured_image %}
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
<!--         <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">

        </div> -->
        
        <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
      </div>
      
     
<!--      <noscript> -->
<!-- ----------START CODE FOR SHOWING DIFFERENT IMAGE ON HOVER---------    -->   
        <div class="reveal"> 
        <img src="{{ product.featured_image.src | img_url: '450x450' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image" />
        <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
        </div>
<!-- ----------START CODE FOR SHOWING DIFFERENT IMAGE ON HOVER---------    -->
<!--       </noscript> -->
    </div>
  </div>
  <div class="product-card__info">
    {% if settings.product_vendor_enable %}
      <div class="product-card__brand">{{ product.vendor }}</div>
    {% endif %}

    <div class="product-card__name">{{ product.title }}</div>

    {% if product.available %}
      <div class="product-card__price">
        {% if product.compare_at_price > product.price %}
          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% else %}
          {% comment %}
            Not on sale, but could still have varying prices
          {% endcomment %}
          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% endif %}
        {%- unless product.price_varies -%}
          {%- if current_variant.unit_price_measurement -%}
            {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
          {%- endif -%}
        {%- endunless -%}
      </div>
    {% else %}
      <div class="product-card__availability">
        {{ 'products.product.sold_out' | t }}
      </div>
    {% endif %}
  </div>

  {% if product.compare_at_price > product.price %}
    {% comment %}
      A visually-hidden label before regular/sale prices clarifies
      prices for screen readers, so hide the sale tag from them.
    {% endcomment %}
    <div class="product-tag product-tag--absolute" aria-hidden="true">
      {{ 'products.product.on_sale' | t }}
    </div>
  {% endif %}
  
  
<!--   
<div class="product-card__overlay">
    {% assign view_string_length = 'products.product.view' | t | size %}
    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
  </div> -->
</a>

  Assets > theme.scss.liquid

The first chunk of CSS code from the original post was causing issues with the secondary image fading properly, so I changed it to this:

.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: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out;  
}

[MRam]

Hello, Thanykyou for this tutorial. However, I have had no luck with it for the boundless theme - are the steps supposed to be repeated for every <img segment? Thanks.

[RawCutSB]

This does not work.

[Godzhand]

Hi,

I have duplicate pictures on mobile version, any idea how to fix it?

[Ziva1]

Thank you for a great tutorial. But I have a problem, so when im looking at the collection page on the phone the picture is no longer a button to press. It's only possible to go to the product by clicking in the product name. Can this be fixed?

[Sandr]

Hello!

I was trying to use this code to have that hover over effect and I ended up finding this one wich works for the theme I'm using on shopify but it is not reflected on my site :/. Works on shopify but not on my site https://www.friendsfromnewyork.com/shop-bodega. Can anyone please help me?

[ramizroshanali]

Thanks for sharing, till adding CSS it was good but when it came to product-loop.liquid I cant find the img src code in the entire code, where to I paste everything? I am using Mobilia theme.

Here is what I see:

[wereproject]

same happens to me. I dont see any img tag in tha file. Im using expanse them

[usturpunks]

Hi, great tutorial. I could find these files and lines in my theme. However, what I am looking for is solution for my products. My mockups use transparent background and when I hover over them I can still see the first image. This is very disturbing. Any solution for this? Thank you. Much appreciated.

[wereproject]

hello thanks for the code, but my product-grid-item.liquid 

doesnt have any <img tag anywhere in the page, how I can do it?