• Vignettes transparentes

    On me demande le code d'un montage publié: le voici en 60% de votre écran.

    Survol.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/N-v0nrrJQw2WT5LY2_kfqRl5FCk.jpg'); background-size: cover;">
    <p id="ng0">Survol.</p>
    <p id="ng1" class="ng">&nbsp;</p>
    <p id="ng2" class="ng">&nbsp;</p>
    <p id="ng3" class="ng">&nbsp;</p>
    <p id="ng4" class="ng">&nbsp;</p>
    <p id="ng5" class="ng">&nbsp;</p>
    <p id="ng6" class="ng">&nbsp;</p>
    <p id="ng7" class="ng">&nbsp;</p>
    <p id="ng8" class="ng">&nbsp;</p>
    </div>
    <hr style="border: 0.5vh dotted black;" />
    <p>...</p>
    <style><!--
    #ng0{position:absolute; z-index:1; width:10vw; text-align:center; transform:translate(25vw,0.2vw); font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .ng{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.6vh solid white; opacity:0.4; transition:all 1s linear;}
    #ng1{background:url('http://ekladata.com/3yYj0VnbhLtqQMi_-hd1UoagMkg.jpg'); background-size:cover; transform:translate(0vw,1.5vw);}
    #ng2{background:url('http://ekladata.com/GlOQKcKZe0SnRz-udGcFp0jzfAU.jpg'); background-size:cover; transform:translate(0vw,9.25vw);}
    #ng3{background:url('http://ekladata.com/-hwFaWYSYe8Fc8lOslozFe1SzUw.jpg'); background-size:cover; transform:translate(0vw,17vw);}
    #ng4{background:url('http://ekladata.com/iI-08EHT_X5W45T99SzrpGOk67w.jpg'); background-size:cover; transform:translate(0vw,25vw);}
    #ng5{background:url('http://ekladata.com/gECd7q_3-aioaGUnnxapU0iCmuM.jpg'); background-size:cover; transform:translate(47.5vw,1.5vw);}
    #ng6{background:url('http://ekladata.com/2OR7zxehmT0e46VOwwyBqBqWHdM.jpg'); background-size:cover; transform:translate(47.5vw,9.25vw);}
    #ng7{background:url('http://ekladata.com/8an1bruXWDAlOgj3q-v2oJ7tBf8.jpg'); background-size:cover; transform:translate(47.5vw,17vw);}
    #ng8{background:url('http://ekladata.com/I_2vPzMWYDO8al42TLpVwRonje8.jpg'); background-size:cover; transform:translate(47.5vw,25vw);}
    #ng1:hover,#ng2:hover,#ng3:hover,#ng4:hover,#ng5:hover,#ng6:hover,#ng7:hover,#ng8:hover{z-index:10; width:60vw; height:33.75vw; border:none; opacity:1; transform:translate(0vw,0vw);}
    --></style>