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

Amer19
New Member
1 0 0

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.

0 Likes
ch81
Tourist
6 0 2

It didn't work on the Brooklyn theme as well

0 Likes
HeyShopr
Shopify Partner
20 2 4

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;
  }
}
0 Likes
HeyShopr
Shopify Partner
20 2 4

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;
  }
}
0 Likes
HeyShopr
Shopify Partner
20 2 4

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
Excursionist
17 2 12

No luck with that code for Brooklyn theme

0 Likes
danielagsb
Explorer
69 0 14

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

ZZainee
New Member
2 0 2

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!

k1p57a
Tourist
4 0 3

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

0 Likes
JunePratt
Tourist
5 0 11

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>