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:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Assets directory, click
theme.css.liquid. If your theme doesn't have atheme.css.liquidfile, then clickstyles.css.liquid, or another file with a.css.liquidfile extension. - At the very bottom of the file, paste this code hosted on GitHub.
- Click Save.
Edit the code for your product images
To edit the code for your product images:
- In the Snippets directory, click
product-grid-item.liquid.
If your theme doesn't have aproduct-grid-item.liquidfile, then look for one of the following:
- product-card.liquid
- product-card-grid.liquid
- product-loop.liquid
- 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 }}"> - On a new line above the
imgtag, paste the following code:
<div class="reveal">
On a new line below theimgtag, 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> - On a new line below the
imgtag 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
- On a new line below the
imgtag 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> - Click Save.
Show custom text on hover
- On a new line below the
imgtag 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 -->
ReplaceYOUR TEXTwith 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 -->. - Click Save.
Show an alternate product image with custom text on hover
- On a new line below the
imgtag 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 --> - Click Save.
Demo store
Click here to view a demo store that has product images with a hover effect.
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!
Hi Robert,
Thank you so much for the link - I followed the steps and unfortunately it is still duplicating the image. This time it enlarged the second the image (which hovers). See images below:
Really struggling with this one 😞
Kind Regards,
Kevin
Hi JunePratt, thank you for the code - I copied both your code sections and it worked however it has somehow duplicated the image (I'm working on Brooklyn).
Therefore, I now have two thumbnail images - 1 where the hover works as expected and 2nd which is a static duplicate. Do you know how I can fix the image duplication so that it only shows the one image with the hover function?
Please see image below:
Hi @animusfilmco I have a similar issue when trying to Search (see attached) were you able to solve this? Any help or pointer is appreciated. I'm also using Brooklyn.
Thanks!
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;
}
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.
hello thank you this was helpful but it actually gave me something that looks like this
