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.

[ezrevolutionx]

Hi TyW,

Thanks for the code. I'm fairly new to shopify and looking to apply the hover effect on my debut theme store.

It seems that the images have been doubled.

May I ask for advise on this and whether there is any solution for it? The images on the first row does not have the hover effect, while the second row does.

Looking forward to your reply. 

Thanks in advance!

[joseluismartine]

Hi Tyw

Thanks for the tutorial.

Do you think a similar approach could be applied to add a text box hover on a non-product image?

Would you be so kind to provide a way forward that I can try to add a box hover with text over regular images on my homepage? Or even pointing me in the right direction would be great too!

I am using Brooklyn.

Thanks

Josè Luis

[chrisbrennan13]

Hi,

Just wondering if you solved this duplication? I am experiencing the same thing.

Thanks in advance!

[havahdesigns]

I followed this step by step on the Minimal theme and it didn't work...

[smilemerry007]

Hi TyW,

    Thanks for your detail introduction on code.

   I have followed them in my Minimal Theme and seccessed to set up hover effect on my product collection page.

  But meanwhile the other negative result is all the image on product collection page became fade and hardly visible .

    Could you kindly help me to check what is wrong? 

[saknight19]

I have followed this tutorial exactly and nothing happens. This is my site.

Has anyone else run into the hover effect not working for them? I'm using Debut theme.

[Monika_Luka]

Hello, I am afraid it did not work. I look for all the code as you showed but they look quite different. The effect was not applied. Can you please assist me with applying the code. Thank you. 

---

[l3e0wu1f]

Has anyone else run into the hover effect not working for them? I'm using Debut theme.

Hey saknight19 – I'm in the same boat. Check this video out for Debut theme solution.

[CuentaMaestra]

It works but only on the first page of 20 products... how can I make it work if I have more pages on a collection because of 20+ products?