Este efecto es perfecto para mostrar información adicional sobre imágenes.

Mejor tutorial

© GloriaV

 

<div id="f1_container" class="hover">
    <div id="f1_card" class="shadow">
        <div class="front face">
            <img src="http://media.giphy.com/media/N8XWcaExxbiFO/giphy.gif" />
        </div>
        <div class="back face center">
            <p>Este efecto es perfecto para mostrar información adicional sobre imágenes.</p>
            <p>Mejor tutorial
            <a href="http://tutorialgloriav.eklablog.com/" target="_new"> 
            <p>© GloriaV<p>
        </div>
      </div>
</div>

CSS

<style>

    #f1_container {
        margin-top:20px;
        position: relative;
        width: 400px;
        height: 300px;
        z-index: 1;
    }
    .face.back {
        display: none;
    }

    #f1_container {
        -webkit-perspective: 1000;
    }
    #f1_card {
        -webkit-box-shadow: 5px 5px 5px #aaa;                
        -moz-box-shadow: 5px 5px 5px #aaa;
        box-shadow: 5px 5px 5px #aaa; 
    border-radius: 5px; border: 1px solid #ccc; 
        width: 100%;
        height: 100%;
        -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: 100%;
        height: 100%;
        -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: #ccc;
        color:#000;
    }
</style>