Texto 1

Texto 2

<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img style="margin-left: auto; border-radius: 2%; 
box-shadow: 1px 1px 6px 1px #666; display: block; 
margin-right: auto;" 
src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif" 
width="195" height="210"/>
</div> <div class="back face center">
<p>Texto 1</p> <p>Texto 2</p></div></div></div>

CSS

#f1_container { 
  position: relative; 
  margin: 10px auto; 
  width: 50%; 
  height: 50%; 
  perspective: 1000; 
  -webkit-perspective: 400; 
  background: ; 
} #f1_card { 
  width: auto; 
  height: auto; 
  transform-style: preserve-3d; 
  transition: all 1.0s ease-in-out; 
  -webkit-transform-style: preserve-3d; 
  -webkit-transition: all 1s ease-in-out; 
  -webkit-transform-origin: right; 
} 
#f1_container:hover #f1_card { 
 -webkit-transform: scaleX(-1); }
#f1_card { 
  width: 50%; 
  height: 50%; border-radius:2%; 
  border: 1px dotted #000;
  transform-style: preserve-3d; 
  transition: all 1.0s ease-in-out; 
  -webkit-transform-style: preserve-3d; 
  -webkit-transition: all 1s ease-in-out; 
  -webkit-transform-origin: right; 
} #f1_container:hover #f2_card { 
  -webkit-transition-delay: 2s; 
 -webkit-transform: scaleX(-1); }
  }
.face {  
  position: absolute; left: 100%; 
  bottom: 100%; 
  width: 50%; 
  height: 50%;
  -webkit-backface-visibility: hidden; z-index: 3; 
} 
.face.back { 
 -webkit-transform: scaleX(-1); }
} 
.face2 { 
  position: absolute; 
  left: 100%; 
  width: 50%; 
  height: 50%;
  -webkit-backface-visibility: hidden; z-index: 0; 
} .face2.back2 { 
 -webkit-transform: scaleX(1); }