•  


    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>