• Survol 5

    Une autre variante peut-être plus simple en code: Survol.

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; background: url('http://ekladata.com/UMEnRLbo38gsqkZqwUrmOILoEzI@900x506.jpg'); background-size: cover; border: 6px ridge white;">
    <p id="rot1">&nbsp;</p>
    <p id="rot2">&nbsp;</p>
    </div>

    <style><!--
    #rot1{position:absolute;z-index:2; width:900px; height:506px;}
    #rot2{position:absolute;z-index:1; width:900px; height:506px; background:url('http://ekladata.com/qpBKq2rNIji8f3C4he66TgKs1Mc@900x506.jpg'); background-size:900px 506px; transition:all 1s linear;}
    #rot1:hover ~ #rot2{transform:rotatey(90deg);}
    --></style>