yes please modification this code
I know.
I am asking you if you can modify this for me and give me the code, as no matter what I try, it does not seem to work.
To have the second image show on hover.
And what would that custom code be? I’ve been looking everywhere and trying to sort out which image is revealed rather than it being the last image.
can you please share store url
yes, shopshelovesme.com
I have not had any luck with this as stated. Currently my code in product-card-grid.liquid looks like this (below) I believe something is implemented incorrectly. Can you please modify the code for me and reply with the proper implementation here. I believe my style.css input is correct:
oh sorry for this issue, yes please add this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.product-card:hover .grid-view-item__image {
display: none;
}
.product-card:hover img.hidden {
opacity: 1;
visibility: visible;
}
Thank you very much. It is now sort of working, but is very glitchy. Please see shopshelovesme.com and see below for the full implementation.
The bottom of my css file looks like this:
/* ===============================================
// 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;
}
}
.product-card:hover .grid-view-item__image {
display: none;
}
.product-card:hover img.hidden {
opacity: 1;
visibility: visible;
}
The product-card-grid file looks like this:
THANK YOU SO MUCH THAT WORKED PERFECTLY
it’s my pleasure to help us
Hello @KetanKumar thanks in advance for your help and time!
Ive been trying to make it work, but after trying a bunch of different codes and you answers, its still not working, it just shows an empty image when hover:
theme.css:
/* ===============================================
// 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;
}
}
.product-card:hover .grid-view-item__image {
display: none;
}
.product-card:hover img.hidden {
opacity: 1;
visibility: visible;
}
product-card-gris.liquid:
The site where you can check it is: https://beatriz-536.myshopify.com/collections/for-her
I hope you can help me with this.
Regards
I hope that you can help me!! I’m trying to implement the hover over effect on my website as well but it is also not working.
I’ve followed the steps as listed in https://community.shopify.com/topic/614960 but it doesn’t work.
My secondary image shows up below the first image or nothing changes at all.
I took it out after because the site was not good, but now i put back exactly as in my reply, both the theme.css and product-card-grid.liquid
Same thing happens (blank/no image on hover)
I really appreciate any help on how to make it work to show 2nd image on hover.
Thanks in advance!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thanks! Site url is the same: https://beatriz-536.myshopify.com/collections/for-her
You can also check it under SHOP menu item, in any of the other pages: For him / Kids
thanks for more details
sorry but i can’t see second image code
otherwise your code work as well
What do you mean? i dont understand, where that code should be, i have:
theme.css:
/* ===============================================
// 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;
}
}
.product-card:hover .grid-view-item__image {
display: none;
}
.product-card:hover img.hidden {
opacity: 1;
visibility: visible;
}
.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
display: none;
}
and for product-card-grid.liquid this:
Where is something missing? What do i need to add?
Thanks again, hope we can make it work after hs and hs 