• Img verticales

    Code publié, ici en 60vw/33.75vw.

    Une image de fond au ratio 16/9 (chez moi 1920x1080px diminuée en 1536x864px pour en limiter le poids) et 12 images "verticales" en 864x486px, même ratio.

    Survol

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/t5DN_TTQo5HaxFVxknlJtfuZsok.jpg'); background-size: cover;"><input id="bl1" class="bl" type="text" /><input id="bl2" class="bl" type="text" /><input id="bl3" class="bl" type="text" /><input id="bl4" class="bl" type="text" />
    <p id="comm">Survol</p>
    <p id="phv1a" class="phv">&nbsp;</p>
    <p id="phv2a" class="phv">&nbsp;</p>
    <p id="phv3a" class="phv">&nbsp;</p>
    <p id="phv1b" class="phv">&nbsp;</p>
    <p id="phv2b" class="phv">&nbsp;</p>
    <p id="phv3b" class="phv">&nbsp;</p>
    <p id="phv1c" class="phv">&nbsp;</p>
    <p id="phv2c" class="phv">&nbsp;</p>
    <p id="phv3c" class="phv">&nbsp;</p>
    <p id="phv1d" class="phv">&nbsp;</p>
    <p id="phv2d" class="phv">&nbsp;</p>
    <p id="phv3d" class="phv">&nbsp;</p>
    </div>

    <style><!--
    .bl{position:absolute; z-index:10; width:2vw; height:2vw; border-radius:50%; border:0.2vh solid black; background:aqua;}
    #bl1{transform:translate(57vw,5vw);}
    #bl2{transform:translate(57vw,12vw);}
    #bl3{transform:translate(57vw,19vw);}
    #bl4{transform:translate(57vw,26vw);}
    #comm{position:absolute; z-index:1; width:5vw; background:rgba(0,0,0,0.5); text-align:center; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(55vw,0vw);}
    .phv{position:absolute; z-index:2; box-sizing:border-box; width:19vw; height:33.75vw;  border:0.4vh solid white; transition:all 0.5s linear;}
    #phv1a{background:url('http://ekladata.com/V47pBkxr3c7bKLaIl5kR_62uDvE.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #phv2a{background:url('http://ekladata.com/auNP4tjKYMqUz7UZtuws0mG1aRQ.jpg'); background-size:cover; transform:translate(19vw,0vw) rotatey(90deg);}
    #phv3a{background:url('http://ekladata.com/V88Jz0PouRYt81aaZ-HTpTc3hRQ.jpg'); background-size:cover; transform:translate(38vw,0vw) rotatey(90deg);}
    #phv1b{background:url('http://ekladata.com/0bVnJw6sUYnElTQNvNZDksXTudo.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #phv2b{background:url('http://ekladata.com/uLWypLu-oCVBOVKxYZO-Z0VCjjs.jpg'); background-size:cover; transform:translate(19vw,0vw) rotatey(90deg);}
    #phv3b{background:url('http://ekladata.com/IDL2hmxl7T8_6M5WAwugKiaQ1rk.jpg'); background-size:cover; transform:translate(38vw,0vw) rotatey(90deg);}
    #phv1c{background:url('http://ekladata.com/hkO6puKdvfXriCw9HZqSlCBd9xM.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #phv2c{background:url('http://ekladata.com/wVh3I2BCBI4iqVuaUZreEgEF5Vc.jpg'); background-size:cover; transform:translate(19vw,0vw) rotatey(90deg);}
    #phv3c{background:url('http://ekladata.com/iwHKkIMS-sDHZjA5uzd69XtZwQU.jpg'); background-size:cover; transform:translate(38vw,0vw) rotatey(90deg);}
    #phv1d{background:url('http://ekladata.com/bqDAC1dgOPVAEoWb6ukbAjnWGBs.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #phv2d{background:url('http://ekladata.com/auNP4tjKYMqUz7UZtuws0mG1aRQ.jpg'); background-size:cover; transform:translate(19vw,0vw) rotatey(90deg);}
    #phv3d{background:url('http://ekladata.com/_4xQ6mwfSH5sc_i0kz-zu1pNYoA.jpg'); background-size:cover; transform:translate(38vw,0vw) rotatey(90deg);}
    #bl1:hover ~ #phv1a,#bl2:hover ~ #phv1b,#bl3:hover ~ #phv1c,#bl4:hover ~ #phv1d{z-index:5; transform:translate(0vw,0vw) rotatey(0deg);}
    #bl1:hover ~ #phv2a,#bl2:hover ~ #phv2b,#bl3:hover ~ #phv2c,#bl4:hover ~ #phv2d{z-index:5;transform:translate(19vw,0vw) rotatey(0deg);}
    #bl1:hover ~ #phv3a,#bl2:hover ~ #phv3b,#bl3:hover ~ #phv3c,#bl4:hover ~ #phv3d{z-index:5;transform:translate(38vw,0vw) rotatey(0deg);}
    --></style>