Reveal second image on hover - Debut theme

Store Design
60

@KetanKumar

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