Texto 1

Texto 2

<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="https://img-fotki.yandex.ru/get/9496/131165231.50/0_c6d17_90e7518d_orig" 
width="195" height="210" />
</div> <div class="back face center">
<p>Texto 1</p><p>Texto 2</p></div></div></div>

CSS

<style>
 #f1_container {
 position: relative;
 margin: 10px auto;
 width: auto;
 height: auto;
 z-index: 1;
 }
 .face.back {
 display: none;
 }
 #f1_container {
 -webkit-perspective: 1000;
 }
 #f1_card {
 width: auto;
 height: auto;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 1.0s linear;
 -moz-transform-style: preserve-3d;
 -moz-transition: all 1.0s linear;
 -o-transform-style: preserve-3d;
 -o-transition: all 1.0s linear;
 -ms-transform-style: preserve-3d;
 -ms-transition: all 1.0s linear; 
 transform-style: preserve-3d;
 transition: all 1.0s linear; 
 }
 #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 transform: rotateY(180deg);
 -webkit-box-shadow: -5px 5px 5px #aaa; 
 -moz-box-shadow: -5px 5px 5px #aaa;
 box-shadow: -5px 5px 5px #aaa; 
 }
 .face {
 position: absolute;
 width: auto;
 height: auto;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden; 
 }
 .face.back {
 display: block;
 -webkit-transform: rotateY(180deg);
 -webkit-box-sizing: border-box;
 -moz-transform: rotateY(180deg);
 -moz-box-sizing: border-box;
 -o-transform: rotateY(180deg);
 -o-box-sizing: border-box; 
 -ms-transform: rotateY(180deg);
 -ms-box-sizing: border-box;
 transform: rotateY(180deg);
 box-sizing: border-box; 
 padding: 10px;
 color: white;
 text-align: center;
 background-color: #fff;
 }
 </style>