-
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>