<!-- IE10+, FF, Chrome, Safari, Opera --> <div class="panel"> <div class="front card"> <img src="http://placehold.it/300x300&text=front"> </div> <div class="back card"> <img src="http://placehold.it/300x300&text=back"> </div> </div>
.panel { position: relative; width: 300px; height: 300px; } .card { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .front { z-index: 2; } .back { z-index: 1; -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); } .panel:hover .front { z-index: 1; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .panel:hover .back { z-index: 2; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); }