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: