• Art.22B.5.21

    Un bricolage suite à un modèle statique trouvé sur le net. 4 images au ratio 16/9 verticales.
    La bordure du cadre et le dégradé du fond peuvent être supprimés.

    Survol face visible.

     

     

    <div style="width: 1000px; height: 600px; margin: 20px auto; text-align: left; border: 1px solid black; background: linear-gradient(to bottom, rgba(200,100,100,0.5) 0%, rgba(150,150,150,0.5) 100%);">
    <p id="reta">Survol face visible.</p>
    <p id="ret0a">&nbsp;</p>
    <p id="ret0b">&nbsp;</p>
    <img id="ret1" class="ret" src="http://ekladata.com/pLveYMbVIww21PZ_uXb1OcgP5jw.jpg" alt="" /> <img id="ret2" class="ret" src="http://ekladata.com/ZCSnk4_DjgMs57cnWd0qAPV4pRw.jpg" alt="" /> <img id="ret3" class="ret" src="http://ekladata.com/ZXAeBXgoInvBR-bM75d0MV78gY4.jpg" alt="" /> <img id="ret4" class="ret" src="http://ekladata.com/f3XMKz4xzRvzTcXj9agum6MEUG0.jpg" alt="" /></div>
    <style><!--
    #reta{position:absolute; z-index:1; width:200px; height:500px; text-align:center; font-size:20px; transform:translate(400px,50px);}
    #ret0a{position:absolute; z-index:5; width:316px; height:562px; transform:translate(50px,20px);}
    #ret0b{position:absolute; z-index:5; width:316px; height:562px; transform:translate(630px,20px);}
    .ret{position:absolute; z-index:1; width:316px; height:562px; border:4px ridge white; transition:all 1s;}
    #ret1{box-sizing:border-box; transform:translate(50px,20px) perspective(700px) rotatey(0deg); transform-origin:center right;}
    #ret2{box-sizing:border-box; transform:translate(366px,20px) perspective(700px) rotatey(80deg); transform-origin:center left;}
    #ret3{box-sizing:border-box; transform:translate(634px,20px) perspective(700px) rotatey(0deg); transform-origin:center left;}
    #ret4{box-sizing:border-box; transform:translate(318px,20px) perspective(700px) rotatey(-80deg); transform-origin:center right;}
    #ret0a:hover ~ #ret1{transform:translate(-266px,20px) perspective(400px) rotatey(-80deg);}
    #ret0a:hover ~ #ret2{transform:translate(50px,20px) perspective(700px) rotatey(10deg);}
    #ret0b:hover ~ #ret3{transform:translate(900px,20px) perspective(400px) rotatey(80deg);}
    #ret0b:hover ~ #ret4{transform:translate(584px,20px) perspective(700px) rotatey(-10deg);}
    --></style>