<div class="flip">
<div class="flip-content">
<div class="flip-front">
<img src="https://www.fillmurray.com/150/150" />
</div>
<div class="flip-back">
<strong>BILL MURRAY</strong>
</div>
</div>
</div>
.flip {
width: 100%;
}
.flip-content {
transition: transform 0.4s;
transform-style: preserve-3d;
}
.flip:hover .flip-content {
transform: rotateY(180deg);
transition: transform 0.3s;
}
.flip-front, .flip-back {
backface-visibility: hidden;
}
.flip-back {
transform: rotateY(180deg);
}