I have created a double sided box, that when you hover, shows the flip side. I have added in a keyframe that goes from opacity: 0 to opacity: 1 to create a fade effect on hover.
It works to flip the card, however when you move the cursor off the box to return to it's original state, the image does not fade out, and you can see the background of the image when you should not. Please refer to the example below.
.catInner3 {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 280px);
}
p {
color: white;
}
.iprodBox {
background-color: #ffffff;
width: 330px;
height: 230px;
cursor: pointer;
transition: 1s;
box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.25);
}
.iprodImg {
height: 80%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.iprodImg img {
object-fit: contain;
height: 70%;
width: 70%;
}
.iprodTitle {
height: 20%;
width: 100%;
background-color: #184e77;
box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
transition: 1s;
}
.iprodDesc {
position: relative;
bottom: 80%;
height: 100%;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
display: none;
}
.iprodBox:hover>.iprodDesc {
display: flex !important;
animation: fade 1s;
}
.iprodBox:hover>.iprodImg img {
display: none !important;
animation: fade 1s;
}
.iprodBox:hover>.iprodTitle {
display: none !important;
animation: fade 1s;
}
.iprodBox:hover {
background-color: #184e77;
}<div class="catInner3">
<a class="iprodBox">
<div class="iprodImg">
<img src="https://i.ibb.co/kXY1pG0/meme.jpg"/>
</div>
<div class="iprodTitle">
<p>Test Title</p>
</div>
<div class="iprodDesc">
<div class="vertDesc">
<p style="font-size: 20px;">Test Title</p>
<p style="display: inline-flex; width: 75%">Test Text</p>
</div>
</div>
</a>
</div>