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

Highlighted
Excursionist
23 1 1

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

0 Likes
Highlighted
Tourist
4 0 1

Can someone give a clear, concise, and complete solution for the implementation of this code on Brooklyn? One of my biggest design barriers are changing the hover style on this theme. There already is one, it dims the images upon hover, how difficult can this be?

 

A big thanks to whoever nails it down ahead of time!

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Tourist
5 0 8

Hi @YeahNah @,

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.

 

0 Likes
Highlighted
Tourist
7 0 1

Anybody knows how to apply that to the debut theme?

0 Likes
Highlighted
New Member
7 0 0

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!

0 Likes
Highlighted
New Member
2 0 0

still need help?

0 Likes
Highlighted
Tourist
7 0 1

Hey,

 

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

 

 

0 Likes
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
New Member
4 0 0

Anyone got this working for the Narrative theme? 

0 Likes