Hover effect for product image to show the second image

Highlighted
New Member
3 0 0

Hi Kala, Could you copy and paste the code here. Tried following the tutorial and the image you shared, seem to be going wrong somewhere despite trying multiple variations. I am using the theme Minimal. 
 

Thanks in advance. 

0 Likes
Highlighted
Tourist
26 0 1

Hey Guys,

This is Tamal here from HeyCarson Shopify experts.

Showing another image on mouse hover for product thumbnails in a collection page or homepage is a great way to intrigue the visitors. However, it's not an easy customization you can make with little code changes. We have created a small task for the theme customization needed to show second product image on mouse hover.  

Thanks

 

0 Likes
Highlighted
Astronaut
1126 150 295

Depending on how you're displaying your product images, it could be an easy fix. If you have a little more than basic understanding of html, I used the following solution. I didnt want to add a bunch of unnecessary code into my theme by following the above pasted tutorial. Here's my code:

 

<div class="slider-wrapper">
  <div class="next fa fa-angle-right"></div>
  <div class="prev fa fa-angle-left"></div>
  <div class="omnia-product-slider">
    {% for prod in collections.omnia.products%}
    {% assign productTitle = prod.title | split: '®'%}
    {% assign productCollection = productTitle[0] %}
    {% assign productName = productTitle[1] %}
    
    <div class="product-image"><a href="{{prod.url}}"><span class="product-title"><h4>{{productCollection}}®<br>{{productName}}<br>
      {{ prod.variants.first.sku }}</h4></span><img class='omnia-image' id="omnia-image-{% increment counter%}" src="{{ prod | img_url:'medium' }}"><img class="hidden-image" src="{{ prod.images[1] | img_url:'medium' }}"></a>
      
      <span class="shopify-product-reviews-badge" data-id="{{ prod.id }}"></span>
      <span class="product-price">{{prod.variants.first.price | money_with_currency}}</span>
    </div>
    {% endfor %}
  </div>
</div>

It looks complicated but it's really not. All you have to focus on really is the <img> tags. So the way I handled it is putting the 2nd product image after the first and positioned it absolutely and translated it as I needed to fit directly over my first image. Here's what my CSS looked like

 

  .hidden-image{
    position: absolute;
    transform: translateY(-100%);
    opacity:0;
    outline:1px solid white;
    outline-offset:-1px;
    transition:all .2s ease-in-out;
  }
  .hidden-image:hover{
    opacity:1;  
  }

so really all I had to do was put a transition on the hidden image with the opacity set to 0, and change it to 1 on hover. I had to sit and think about it for a while, because initially I was thinking of using a javascript solution but I couldn't use liquid code in javascript so I kept coming up empty. This solution, however is much better and requires no liquid or javascript at all. Hope it helps someone

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
10 0 1

ok guys, got it to work, only based on what Kala posted above. 

Copying the code so it's easier to copy-paste.

On your product-grid-item-liquid: 

 


            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
               
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ featured.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ featured.featured_image.alt | escape }}">
                 <img id="{{ img_id }}"
                     class="product__img hidden"
                     src="{{ product.images.last | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ product.images.last.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ product.images.last | escape }}">
              </div>

Basically, you are adding te second image...it looks like a duplicate but it's not. 

This is the only thing that made it work for me. 

Now i just have to deal with making the second image not distorted... bc this code is forcing a 300x300 raito and its distorting my hover img.

Hope this helps!

1 Like
Highlighted
Tourist
6 0 0
Hover Effect for Minimal Theme ver 10 Dt: 17-04-2019. Edit Code-->Snippets-->product-grid-item.liquid
(paste this code)
{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}
 
{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
  {% assign on_sale = true %}
{% endif %}
 
{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
  {% assign sold_out = false %}
{% endif %}
 
{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}
 
<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product">
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
 
            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ featured.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1720, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ featured.featured_image.alt | escape }}">
             <img id="{{ img_id }}"
class="product__img hidden"
src="{{ product.images[1] | img_url: '750x750' }}"
data-src="{{ img_url }}"
data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1720, 1728, 2040]"
data-aspectratio="{{ product.images[1].aspect_ratio }}"
data-sizes="auto"
alt="{{ product.iamges[1] | escape }}">
              </div>
            </div>
        {% else %}
        <div class="reveal">
        <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
        <img class="hidden" src="{{ product.images[1] | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
        </div>  
          {% endunless %}
          <noscript>
            <div class="reveal">
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          <img class="hidden" src="{{ product.images[1] | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
            </div>
        </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {% capture price %}{{ featured.price | money }}{% endcapture %}
        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}
        {% endif %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      </p>
    {% endif %}
  </a>
<span class="shopify-product-quickshop-button" data-id="{{product.handle}}"></span>
</div>

 

 


@FABIAN_LEMA_SIL wrote:

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.



@FABIAN_LEMA_SIL wrote:

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.



@FABIAN_LEMA_SIL wrote:

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.



@FABIAN_LEMA_SIL wrote:

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.



@FABIAN_LEMA_SIL wrote:

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.


 

0 Likes
Highlighted
Tourist
6 0 0
{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
  {% assign sold_out = false %}
{% endif %}

{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product">
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ featured.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1720, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ featured.featured_image.alt | escape }}">
          	   <img id="{{ img_id }}"
					class="product__img hidden"
					src="{{ product.images[1] | img_url: '750x750' }}"
					data-src="{{ img_url }}"
					data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1720, 1728, 2040]"
					data-aspectratio="{{ product.images[1].aspect_ratio }}"
					data-sizes="auto"
					alt="{{ product.iamges[1] | escape }}">
              </div>
            </div>
        {% else %}
        <div class="reveal">
        <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
        <img class="hidden" src="{{ product.images[1] | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
        </div>  
          {% endunless %}
          <noscript>
            <div class="reveal">
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
         	<img class="hidden" src="{{ product.images[1] | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
            </div>
        </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {% capture price %}{{ featured.price | money }}{% endcapture %}
        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}
        {% endif %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      </p>
    {% endif %}
  </a>
<span class="shopify-product-quickshop-button" data-id="{{product.handle}}"></span>
</div>
0 Likes
Highlighted
New Member
5 0 0

<a href="{{ product.url | within: collection }}" class="product-card">
{% comment %} <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image"> {% endcomment %}
{% 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>
<div class="reveal">
<img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">
<img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
</div>
</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 %}
{%comment%} <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>{%endcomment%}
</a>

0 Likes
Highlighted
New Member
1 0 0

How can i show the product description on hover? The 2nd photo works but i cant get the description to show on hover minimal theme 

0 Likes