Texto

<div id="f2_container" class="hover">
 <div id="f2_card" class="shadow">
 <div class="front face">
 <img src="https://img-fotki.yandex.ru/get/4909/131165231.6a/0_dc80c_3093e75b_orig"width="195" height="210"/></div>
 <div class="back face center">
 <p>Texto</p></div></div></div>

CSS

<style>
 #f2_container {
 position: relative;
 margin: 10px auto;
 width: auto;
 height: auto;
 z-index: 1;
 }
 #f2_container {
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
 -ms-perspective: 1000;
 perspective: 1000;
 }
 #f2_card {
 width: 50%;
 height: 35%;
 -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;
 }
 #f2_container:hover #f2_card, #f2_container.hover_effect #f2_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; 
 }
 </style>