Tutorial: Show Second Image on Hover

In this tutorial we will create an effect for the collection page that that shows the second product image on hover.

Result:

How-to:
You'll need to make code customizations with 2 files. The first one is your product-grid-item.liquid file. You'll need to replace a section of code with new code. Check which  version of Pipeline you're using to help find the correct code required. Click on the link below to open your product-grid-item file in the HTML/CSS editor,  find the old code based on your version, highlighted in a red box. Then replace that section with code from the green box of your version. The second step is to add some style code to the very bottom of your style.css.liquid file. That link and code from the grey box is below. 

Step 1:

snippets/product-grid-item

Around line 19 (line 59 in Pipeline 3) of  (click following link to open if you have a published version of Pipeline):

snippets/product-grid-item.liquid

Replace this code:

Pipeline 3

  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product_img_url }}" alt="{{ product.featured_image.alt | escape }}">
    {{ sticker }}
  </a>

Pipeline 2

  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product_img_url }}" alt="{{ product.featured_image.alt | escape }}">
  </a>

Pipeline 1.x

<a href="{{ product.url | within: collection }}" class="grid__image">
	<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</a>

With this code:

Pipeline 3

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
    {{ sticker }}
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}">
    {{ sticker }}
  </a>
{% endif %}

Pipeline 2

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}">
  </a>
{% endif %}

Pipeline 1.x

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
  </a>
{% endif %}

Save the file after replacing the code.

Step 2: All versions of Pipeline

assets/style.scss

Add this code at the end of of your assets/style.scss.liquid file. Click this link if you have a published version of Pipeline:

assets/style.scss.liquid

Tip: Add a couple extra blank lines at the very bottom of the page before pasting this in.

Code to add (all versions of Pipeline):

.supports-no-touch .double__image{
  .collection__image__top{ display: inline-block; }
  .collection__image__bottom{ display: none; }
  &:hover{
    .collection__image__top{ display: none; }
    .collection__image__bottom{ display: inline-block; }
  }
}
.supports-touch{
  .collection__image__bottom{ display: none; }
}

Save the file.

Still need help? Contact Us Contact Us