How to increase size of a product image when hovering over the product?

[KimGottwald]

Hello,

I recently saw some Shops where the product image gets bigger while hovering over it. (For example: https://sourire-worldwide.com/collections/forever-capsule-collection) 

What type of Code has to be used to do the same?

Thanks 🙂

[Horlart_Expert]

Hello.

To add a hover effect, it's either from your theme where you select show next image as hover or 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,

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.

At the very bottom of the file, paste 

/* ===============================================

// Reveal module

// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}

.product:hover .reveal img { opacity: 1; }

.reveal { position: relative; }

.reveal .hidden {

  position: absolute;

  z-index: -1;

  top: 0;

  width: 100%;

  height: 100%; 

  opacity: 0;

  -webkit-transition: opacity 0.3s ease-in-out;

  -moz-transition: opacity 0.3s ease-in-out;

  -o-transition: opacity 0.3s ease-in-out;

  transition: opacity 0.3s ease-in-out; 

}

.reveal:hover .hidden {

  z-index: 100000;

  opacity: 1;   

}

.reveal .caption {

  position: absolute;

  top: 0; 

  display: table;

  width: 100%;

  height: 100%;

  background-color: white; /* fallback for IE8 */

  background-color: rgba(255, 255, 255, 0.7);

  font: 13px/1.6 sans-serif;

  text-transform: uppercase;

  color: #333;

  letter-spacing: 1px;

  text-align: center;

  text-rendering: optimizeLegibility;

}

.reveal .hidden .caption .centered {

  display: table-cell;

  vertical-align: middle;

}

Let me know if it did not work on your theme

[KimGottwald]

Im using the Brooklyn theme and this code did not work sadly.

[Horlart_Expert]

Follow this then

First step just copy the reveal code here to your theme.scss.liquid

https://gist.github.com/carolineschnapp/63fd3c4327a466174aa8

Then find your "product-grid-item.liquid"

Search {% if featured_image.src== blank %} in the code

It will look something like this

 {% if featured_image.src== blank %}

          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">

        {% else %}

add this code below that line 

   <div class="reveal">

so it will look like this

{% if featured_image.src== blank %}

          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">

        {% else %}

         <div class="reveal">

Then find this code (which is after the above code)

<div id="{{ img_wrapper_id }}" class="product--wrapper">

            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">

              <img class="product--image lazyload {{ img_id_class }}"

                   data-src="{{ img_url }}"

                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"

                   data-aspectratio="{{ featured_image.aspect_ratio }}"

                   data-sizes="auto"

                   alt="{{ featured_image.alt | escape }}"

                   data-image>

then add this code below 

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

            </div> 

so the finish will look like this

      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>

        {% if featured_image.src== blank %}

          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">

        {% else %}

         <div class="reveal">

          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

          <div id="{{ img_wrapper_id }}" class="product--wrapper">

            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">

              <img class="product--image lazyload {{ img_id_class }}"

                   data-src="{{ img_url }}"

                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"

                   data-aspectratio="{{ featured_image.aspect_ratio }}"

                   data-sizes="auto"

                   alt="{{ featured_image.alt | escape }}"

                   data-image>

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

            </div>

            </div>

          </div>

[KimGottwald]

Thank you, but now it shows another picture of the product while hovering and not the first picture bigger.

[Horlart_Expert]

Only products that have one image will show bigger, others will show the next image, check the store link you sent as well