Creé un cuadro de doble cara, que cuando pasas el cursor, muestra la otra cara. He agregado un keyframe que va de opacity: 0 a opacity: 1 para crear un efecto de desvanecimiento al pasar el mouse.
Funciona para voltear la tarjeta, sin embargo, cuando mueve el cursor fuera del cuadro para volver a su estado original, la imagen no se desvanece y puede ver el fondo de la imagen cuando no debería. Consulte el ejemplo siguiente.
.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>