Collection - Add a hover effect to product images on your collection pages

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click 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.
4. At the very bottom of the file, paste this code hosted on GitHub.
5. Click Save.

Edit the code for your product images

To edit the code for your product images:

1. In the Snippets directory, click product-grid-item.liquid.
   If your theme doesn't have a product-grid-item.liquid file, then look for one of the following:
   
   
   • product-card.liquid
   • product-card-grid.liquid
   • product-loop.liquid
     
     
2. 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 }}">

3. On a new line above the img tag, paste the following code:
   
   

   <div class="reveal">

   
   On a new line below the img tag, 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>

4. On a new line below the img tag 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

1. On a new line below the img tag 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>

2. Click Save.

Show custom text on hover

1. On a new line below the img tag 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 -->

   
   Replace YOUR TEXT with 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 -->.

2. Click Save.

Show an alternate product image with custom text on hover

1. On a new line below the img tag 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 -->

2. Click Save.

 

Demo store

Click here to view a demo store that has product images with a hover effect.

[ezrevolutionx]

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!

[chrisbrennan13]

Hi,

Just wondering if you solved this duplication? I am experiencing the same thing.

Thanks in advance!

[joseluismartine]

Hi Tyw

Thanks for the tutorial.

Do you think a similar approach could be applied to add a text box hover on a non-product image?

Would you be so kind to provide a way forward that I can try to add a box hover with text over regular images on my homepage? Or even pointing me in the right direction would be great too!

I am using Brooklyn.

Thanks

Josè Luis

[havahdesigns]

I followed this step by step on the Minimal theme and it didn't work...

[smilemerry007]

Hi TyW,

    Thanks for your detail introduction on code.

   I have followed them in my Minimal Theme and seccessed to set up hover effect on my product collection page.

  But meanwhile the other negative result is all the image on product collection page became fade and hardly visible .

    Could you kindly help me to check what is wrong? 

[saknight19]

I have followed this tutorial exactly and nothing happens. This is my site.

Has anyone else run into the hover effect not working for them? I'm using Debut theme.

[l3e0wu1f]

Has anyone else run into the hover effect not working for them? I'm using Debut theme.

Hey saknight19 – I'm in the same boat. Check this video out for Debut theme solution.

[robertandrews]

This works for Debut for me, where other similar instructions do not.

https://www.youtube.com/watch?v=9uxSrOxxZpY

But I would love to find code that would ZOOM the primary image, not just give an alternate image.

[KevJVR]

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:

First ImageImage with Hover (blown up)

Really struggling with this one 😞 

Kind Regards,

Kevin

[KevJVR]

Found the error in my code - all is working now! Thank you so much!

[deadrosesuk]

Hey I'm having the same issues you were facing, what was the error in your code? - I'm hoping I just need to fix the same bit of code and it work haha!

[Thesugarbandits]

Thanks this worked for us.

[Amer19]

I'm using a Debut theme and followed the exact steps mention but it did not work. Did someone else was able to do this on Debut theme? Thanks.

[ch81]

It didn't work on the Brooklyn theme as well

[HeyShopr]

Hello,

For Brooklyn, try this code.  See a demo here (preview link from Shopify expires in 14 days): https://50xsd8wr0jvludpv-20140633.shopifypreview.com/collections/all

/* ===============================================
// Reveal module
// =============================================== */

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

.template-collection .product--wrapper:hover .reveal img {
  opacity: 1;
  cursor: pointer;
}

.reveal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
  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;
}

.template-collection .product--wrapper: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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption {
    font-size: 11px;
  }
}

[HeyShopr]

Just realized there is a typo in my previous replies. I can't edit the replies so I've pasted the corrected code here.

For Debut:

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

.template-collection .product-card:hover .reveal img {
  opacity: 1;
  cursor: pointer;
}

.reveal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
  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;
}

.template-collection .product-card:hover .hidden {
  z-index: 1;
  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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption {
    font-size: 11px;
  }
}

For Brooklyn:

/* ===============================================
// Reveal module
// =============================================== */

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

.template-collection .product--wrapper:hover .reveal img {
  opacity: 1;
  cursor: pointer;
}

.reveal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
  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;
}

.template-collection .product--wrapper:hover .hidden {
  z-index: 1;
  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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption {
    font-size: 11px;
  }
}

[itryhard]

No luck with that code for Brooklyn theme

[danielagsb]

This did not work with boundless theme either - did anyone manage to get it to work? thank you

[ZZainee]

Has anyone tried this with the Supply theme? I've tried it but only the images show up, and the title, price, compare at price are all gone.

Thanks!

[AndiVillacis]

Hello @HeyShopr 

Thank you very much for helping us!

I was wondering if can help me with a code for the Supply Theme?

I would be very grateful if you can help me!

Thanks in advance,

Andi

[jiacheng1996]

Works for me!

[jiacheng1996]

https://www.youtube.com/watch?v=9uxSrOxxZpY

Follow this video it works for debut theme especially when your featured collection doesn't work

[Nanakal]

Hi, I applied this tutorial on the Debut theme, it duplicated all the product images. All uploaded images on my store are JPG not PNG, still no luck 😕

[Ashaan]

Thank you very much @HeyShopr . This worked for me using the Debut theme. 

 

[JP_24]

Can you please also share code for product-card-grid.liquid  for Debut Theme.

[JP_24]

@HeyShopr 

can you please share code for product-card-grid.liquid for Debut Theme along with theme.css code

[HeyShopr]

Hi,

Try the following code with Debut.

A demo can be found here: https://cookies-by-maria.myshopify.com/collections/all

/* ===============================================
// Reveal module
// =============================================== */

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

.template-collection .product-card:hover .reveal img {
  opacity: 1;
  cursor: pointer;
}

.reveal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
  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;
}

.template-collection .product-card: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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption {
    font-size: 11px;
  }
}

[Rei2022]

Hello,

I've just check your website somehow you managed to do hover. Could you please share with me?

[Monika_Luka]

Hello, I am afraid it did not work. I look for all the code as you showed but they look quite different. The effect was not applied. Can you please assist me with applying the code. Thank you. 

---

[CuentaMaestra]

It works but only on the first page of 20 products... how can I make it work if I have more pages on a collection because of 20+ products?

[k1p57a]

Hey TyW,


First of all, thank you so very much for taking the time to write up a tutorial like this! It's easy to understand and a quick read.

We're working with Brooklyn theme over here, and your tutorial doesn't seem to apply – seems Brooklyn's built their img tag a little different then is shown in your tutorial. We have put in some work trying to analyze (💪🤓), however we can't seem to figure it out.

Here's what we've come up with...

Brooklyn seems to have 3 separate img tags in the product-grid-item.liquid file:

Line 50

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

Lines 55-61

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

and Line 65

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

By process of elimination line 50 and line 65 did absolutely nothing... Hence, not it.

Wrapping the div (as instructed) around the image tag (lines 55-61) however, completely broke the template, no longer showing any images whatsoever. Hence we strongly believe it must be that one 😉

Seeing that Brooklyn uses a much more complex way of listing their images, we're guessing the html for the wrapping div would need to be adapted accordingly also.

Got any pointers? Has anyone else figured this out already?

Any answers are most welcome.


Cheers,
Phil

[JunePratt]

Hey Phil,

I'm also using Brooklyn theme and I've spent the past 3 hours scratching my head at this. I ended up finding a solution here. Basically around line 61 or so you need to duplicate that <img> tag and replace 'featured_image' with 'product.images[1]'. This will hopefully fix your problem.

I've pasted my code below which should allow for an easy copy paste for you. The issue now is that the loaded images are essentially thumbnails. Hopefully I can find a workaround. If I do I'll make sure to update you.

 <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>
	   <div class="reveal">
        {% if featured_image.src== blank %}


          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          <img class="hidden" src="{{ product.images[1].src | img_url: '1024x' }}" alt="{{ product.images[1].alt | escape }}" />
  
          {% else %}
          {% 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>
            {% if product.images.size > 1 %}
              <img class="product--image lazyload hidden {{ img_id_class }}"
                   data-src="{{ product.images[1] | img_url 'large' }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.images[1].aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.images[1].alt | escape }}"
                   data-image>
            {% endif %}
            </div>
          </div>
          
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
         	<img class="hidden grid-product__image" src="{{ product.images[1].src | img_url: '1024x' }}" alt="{{ product.images[1].alt | escape }}" />
  
         </noscript>
        {% endif %}
  </div>
      </a>

[mdkallday001]

doesnt work on brooklyn

the images just tend to overlay eachother

anyone help?

[animusfilmco]

They have to be jpeg and not png. There are app plugins that will convert
all of your images for you.

[JunePratt]

Hey Phil, I'm back with a more concise answer.

If you copy and paste this in your 'product-grid-item.liquid' below " <div class="grid-product__image-wrapper">" and above "{% if sold_out %}"  you should be better than good!

      <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>
	   <div class="reveal">
        {% if featured_image.src== blank %}


          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          <img class="hidden" src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
  
          {% else %}
          {% 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="{{ featured_image.src | img_url: '1024x' }}"
                   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>
            {% if product.images.size > 1 %}
              <img class="product--image lazyload hidden {{ img_id_class }}"
                   data-src="{{ product.images[1] | img_url: 'large'}}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.images[1].aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.images[1].alt | escape }}"
                   data-image>
            {% endif %}
            </div>
          </div>
          
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
         	<img class="hidden grid-product__image" src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
  
         </noscript>
        {% endif %}
  </div>
</a>

For reference this is what my Reveal Module css looks like:

/* ===============================================
// 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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

[animusfilmco]

Hey There, 

Thank you for this! It's working for me in the Brooklyn theme, however, some of the hover images just layer on top of the other image, so with two PNGs that have transparent background, I see both images. It also seems to be compressing aspect ratios of some images. Is there a fix in the code, or do I need to adjust my images?

Thanks so much!

[k1p57a]

Well thank you JunePratt!!

This worked like an absolute charm! Sorry for my late reply, with all that's been going on I haven't been around much lately...

While I'm at it, would you mind if I picked your brain about something? We've had a pretty skilled dev working on a shop a while back and he actually managed to set up the hover image by calling it up using the alt-tag of said image. For example, you could use "hover-image" on any desired image and that's the image it'd switch to. Any ideas how that would work?

Also, I went ahead and changed the reveal module ever so slightly for a smoother fade in/out transition only. Ease-in-out seemed buggy somehow (image snaps back to previous instead of fading back out) so I went ahead and used transition all:

.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;  
}

[klooney]

@k1p57a 

Thank you for this. The only issue I was actually having with my site was that part of the image would fade slower when hovering off. By switching from 'opacity' to 'all' it fixed it. So, if anyone is having issues with that, make that same change and see if it works. I'm using Venture theme BTW, so if you're having issues with the images fading on that theme change it from transition: opacity 0.3s ease-in-out; to transition: all 0.3s ease-in-out; under the .reavel .hidden in the original css from the original post.

[ronneybhasin]

Hi June, 

Thanks for sharing this code, it works really well for Brooklyn.

Ronney

BusinessGrowthTalk

[KevJVR]

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:

[Mathias08]

woaw it works !!!! thanks you guy ! I was tried some tuto since 2 days 

[YeahNah]

Hey June,

The last code that you added to the thread, is that in addition to something else? I copied it into the exact spot that you mentioned, but it only made the product image two photos in one. Was there a previous step to also follow?

Thanks

[JunePratt]

Hi @YeahNah @Peoni300 ,

In order for this to work you need to follow the instructions in the original post and/or ad this code to your theme css, otherwise you'll end up with two images and the hover feature won't work. The first bit of code I posted in my other post goes in the product-grid-item.liquid snippet.

/* ===============================================
// 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;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

@getyourbirdseed and others,

My advice is to follow the original poster's instructions and then follow my previously posted instructions on page 3 of this thread. Brooklyn's images for the collection grid is located in the product-grid-item.liquid. The image tag is around line 59, if you have a little bit of html know how you should be able to figure it out fairly quickly.

I hate to be like this, but I unfortunately can't live on replying to people on the shopify design community forum. Hopefully, I can get around to making an instructional video for this topic, but if I do that will be far down the line. If you're looking for something immediate please feel free to hire me through my personal messages here or contact me on my website: joonipea.com. My rates are competitive and sliding scale.

[inni]

Anybody knows how to apply that to the debut theme?

[michaellauu]

still need help?

[inni]

Hey,

Yes! I am trying to achieve a text hover (with some transparency) on some products and some image image hover for others.

[michaellauu]

send me a code block that contains the product img or any image you're trying to have it work for

[animusfilmco]

I have Brooklyn and this works perfectly, however on my search page I get a "Liquid error: Unkown operator blank" message where every photo should be and every items says "Sold out". If I try and add == instead of = to certain places in product-grid-item.liquid it will get rid of the "sold out" issue on the search page but then creates other issues on normal collection pages. Anyone had this issue?

Thanks in advance!

[JaimeRosales]

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!