Product Hover Effect in Brooklyn Theme

Highlighted
New Member
5 0 0

Hi, I tried to do this tutorial and it did not work on my Brooklyn theme, and I saw others have mentioned that it doesn't work for them, either. https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images

 

Does anyone know the fix for this? I am not good with code so I won't know where I should be pasting any new advice. Thanks!

 

0 Likes

Hello 
Please share your site url.

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes

Hi @rockyroad1 ,

Here is something for you. It may help you to solve your issue.

 First you have to add this code in snippts->product-grid-item.liquid.

<div class="reveal">
<img src="{{ product.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>

 

After this you have to add some css in theme.scss.liquid.

 

 

.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: 2;
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;
}
.grid-product__image-link {
background-color: transparent !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.grid-product__image-link--loading {
background-color: transparent !important;
-webkit-animation: none;
-moz-animation: none !important;
-o-animation: none !important;
animation: none !important;
}

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

I hope this will help you to solve your issue.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes