• Plein Ecran 20

    Survol puis clic sur chaque vignette.



    <div style="width: 51vw; height: 10vw; border: 0.1vh solid black; border-radius: 3vw; box-shadow: inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.8vh black; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 51vw 10vw; margin: 1vh auto; text-align: left;"><input id="cay1" class="cay" type="text" /> <input id="cay2" class="cay" type="text" /> <input id="cay3" class="cay" type="text" /> <input id="cay4" class="cay" type="text" /> <input id="cay5" class="cay" type="text" /> <input id="cay6" class="cay" type="text" /> <input id="cay7" class="cay" type="text" /> <input id="cay8" class="cay" type="text" /> <img id="vaut1" class="vaut" src="http://ekladata.com/lMS0hDRGNwzRBLfLvynXeNFaLcQ.jpg" alt="" /> <img id="vaut2" class="vaut" src="http://ekladata.com/9oBjR9TgmuG6npocaFZzmtTI_Q0.jpg" alt="" /> <img id="vaut3" class="vaut" src="http://ekladata.com/WtEMQGEEQlj82iQAXwraJ66900s.jpg" alt="" /> <img id="vaut4" class="vaut" src="http://ekladata.com/3iL9wBWrQDCTg5tJ5-4AFIuk2xE.jpg" alt="" /> <img id="vaut5" class="vaut" src="http://ekladata.com/Bh6LW6TbvuKGxCD92pKMpXvoveg.jpg" alt="" /> <img id="vaut6" class="vaut" src="http://ekladata.com/F8G4JvdvFCwi4b0EPC04ke56EKU.jpg" alt="" /> <img id="vaut7" class="vaut" src="http://ekladata.com/Vz2Q5s5-7iUDsueWFB8ttymV-k4.jpg" alt="" /> <img id="vaut8" class="vaut" src="http://ekladata.com/i1NNuSaxe0MAFQ85qJqr0UUsW8s.jpg" alt="" /></div>
    <style><!--
    .cay{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform-origin:center center;transition:all 0.5s linear;}
    #cay1{transform:translate(0vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/lMS0hDRGNwzRBLfLvynXeNFaLcQ@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay2{transform:translate(6vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/9oBjR9TgmuG6npocaFZzmtTI_Q0@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay3{transform:translate(12vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/WtEMQGEEQlj82iQAXwraJ66900s@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay4{transform:translate(18vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/3iL9wBWrQDCTg5tJ5-4AFIuk2xE@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay5{transform:translate(24vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/Bh6LW6TbvuKGxCD92pKMpXvoveg@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay6{transform:translate(30vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/F8G4JvdvFCwi4b0EPC04ke56EKU@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay7{transform:translate(36vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/Vz2Q5s5-7iUDsueWFB8ttymV-k4@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay8{transform:translate(42vw,0.8vw) rotatey(65deg); background:url('http://ekladata.com/i1NNuSaxe0MAFQ85qJqr0UUsW8s@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #cay1:hover{z-index:5;transform:translate(0vw,0.8vw) rotatey(0deg);}
    #cay2:hover{z-index:5;transform:translate(6vw,0.8vw) rotatey(0deg);}
    #cay3:hover{z-index:5;transform:translate(12vw,0.8vw) rotatey(0deg);}
    #cay4:hover{z-index:5;transform:translate(18vw,0.8vw) rotatey(0deg);}
    #cay5:hover{z-index:5;transform:translate(24vw,0.8vw) rotatey(0deg);}
    #cay6:hover{z-index:5;transform:translate(30vw,0.8vw) rotatey(0deg);}
    #cay7:hover{z-index:5;transform:translate(36vw,0.8vw) rotatey(0deg);}
    #cay8:hover{z-index:5;transform:translate(42vw,0.8vw) rotatey(0deg);}
    .vaut{position:absolute; z-index:100; width:100vw; height:0vw; left:0; transition:all 1s linear;}
    #cay1:focus ~ #vaut1,#cay2:focus ~ #vaut2,#cay3:focus ~ #vaut3,#cay4:focus ~ #vaut4,#cay5:focus ~ #vaut5,#cay6:focus ~ #vaut6,#cay7:focus ~ #vaut7,#cay8:focus ~ #vaut8{height:56.25vw;}
    --></style>