Adding a hover effect to product images on your collection pages

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

In this tutorial, we will create a product thumbnail hover effect with CSS. When you will place your cursor over a product image on your collection page, we will reveal an image and text, like so:

Mouseover effect

See the hover effect in action in this store, and in that store.

You will need to feel very comfortable with editing HTML as you will need to customize your theme's files for this.

Tip

If you would like to experiment with this tutorial's code in a safe environment, have a look at this CodePen.

Codepen

Add some CSS to your theme stylesheet

In this first step, you will need to locate your theme's stylesheet and add styles to it.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. On the left, under the Assets folder, locate your stylesheet, and click it to open it in the editor.

    Note

    Your theme stylesheet will have a .css.liquid or .scss.liquid extension, but is not the checkout.css.liquid file which is used to customize your checkout. Generally, this file is named style.css.liquid.

  4. Copy the entire contents of this gist.

  5. At the very bottom of your stylesheet, paste the code you just copied.

  6. Save your changes.

Find the snippet that contains your product image

In this second step, you will need to locate the file of your theme which contains the HTML of each individual product box found on your collection pages. That code is almost always found in a snippet.

On the Edit HTML/CSS page, under the Snippets folder, locate any of the following files:

  • snippet-product-item.liquid
  • product-grid-item.liquid
  • product-loop.liquid
  • loop.liquid
  • product-thumbnail.liquid
Reveal snippets folder

There will be only 1 file with any of the above names. The name can differ slightly.

Once you have located the file, click it to open it in the online editor.

If you are unable to find the snippet, look under Templates and click on collection.liquid. You'll find your products there.

Find your product's image tag and wrap it in a div

Inside your snippet file, use CTRL-F on the Mac, or Cmd-F on the PC, to locate this code:

product.featured_image

That way, you'll find quickly the img tag of your product.

The code for it starts with <img and ends with > or />. It looks like this:


<img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />

Wrap that code in a new div element with class name “reveal”, like so:

<div class="reveal">
  YOUR IMAGE TAG
</div>

You are adding an element, and not deleting any.

The new div element, with class name “reveal”, now contains the image tag of your product.

Reveal tag

Decide what you would like to reveal on hover

You can either reveal the last image of the product, or text, or both image and text.

Once you've made up your mind, jump to the right set of instructions:

Reveal the last image of the product

If you would like to reveal an image and no text, inside your new div element with class “reveal”, and right below your original product image tag, add this new image tag:


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

Use the same size for your new image tag as used by the visible image. If the other image uses the size “large” use “large”, it if uses “medium” use “medium”, and so on.

Notice how the image tag we added has a class name, “hidden”. That's very important!

Reveal image

You're done!

Reveal text

Now, if you'd like to reveal text and no image, add, inside your new div element with class “reveal”, and right below your original product image tag, the following HTML 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 the “YOUR TEXT” bit with the text you wish to reveal.

For example, your text could be the product title and price:


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

So, the code you just added is within the div with class “reveal”, and is right below your image tag, like so:

<div class="reveal">
  YOUR 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 -->

That's a lot of div elements. Alas, we need all of them to perfectly center our text, horizontally and vertically, over the image.

Caution

Be extremely cautious that each div element is properly closed. Each opening <div class="something"> tag must be matched by a closing one, <\div>.

That's it, you're done!

Reveal the last image of the product and text

Now, if you would like to reveal both image and text, you will need to add an image tag and text like so:


<div class="reveal">
  YOUR ORIGINAL IMAGE TAG
  <div class="hidden">
    <img src="{{ product.images.last | product_img_url: 'large' }}" 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 -->

Examine carefully the structure above. Make sure both image and text are within a div with class “hidden”.

You're done!

Tip

If you would like to experiment with this code in a safe environment, have a look at this CodePen.

Codepen

Caution

Curly quotes have been used throughout this tutorial, but should never be used in the Edit HTML/CSS page. Always use straight quotes in your code.

FAQ

Will this code work in my responsive theme?

Yes.

Does this work in Internet Explorer?

Yes, it works all the way down to Internet Explorer 8. In IE8, if you reveal text, the background of the text will be white, with no transparency, so you won't be able to reveal both image and text. Nothing will look broken though.

Can Shopify help me with applying this tutorial to my theme?

No, it isn't a supported customization.

If I reveal an image, can I reveal the second image of the product, or third, instead of the last?

Yes, you can. Make sure your products have the images to show for it by using an if statement. You could, for example, use the following code to reveal the second product image, and no text:


{% if product.images.size > 1 %}
<img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
{% endif %}

The index between brackets is zero-based, the first image has an index 0, the second image has an index 1, the third image has an index 2, etc.

Demos

See the hover effect in action in this store, and in that store.

Want to discuss this page?

Visit the Shopify Community