• Exemple 116

    8 images au ratio 16/9 

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="corn0">Survol</p>
    <p id="corn1" class="corn">&nbsp;</p>
    <p id="corn2" class="corn">&nbsp;</p>
    <p id="corn3" class="corn">&nbsp;</p>
    <p id="corn4" class="corn">&nbsp;</p>
    <p id="corn5" class="corn">&nbsp;</p>
    <p id="corn6" class="corn">&nbsp;</p>
    <p id="corn7" class="corn">&nbsp;</p>
    <p id="corn8" class="corn">&nbsp;</p>
    </div>

    <style><!--
    #corn0{position:absolute; z-index:1; width:7vw; font-size:2vw; transform:translate(26.5vw,9.5vw);}
    .corn{position:absolute; z-index:1; box-shadow: 0.4vh 0.4vh 0.6vh black; width:16vw; height:9vw; border:0.4vh solid white; filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
    #corn1{box-sizing:border-box; background:url('http://ekladata.com/dl7eSuvAACEsQek0DlE4byG1bR4.jpg');background-size:cover; transform:translate(0vw,0vw);}
    #corn2{box-sizing:border-box; background:url('http://ekladata.com/S1aftorAYOVtoLGH-7UZOMPd7j4.jpg'); background-size:cover; transform:translate(22vw,0vw);}
    #corn3{box-sizing:border-box; background:url('http://ekladata.com/D8z9CLtO10Aq_wxBSs1NZhhbbaw.jpg'); background-size:cover; transform:translate(44vw,0vw);}
    #corn4{box-sizing:border-box; background:url('http://ekladata.com/dJHXOIV4QZaWK6WGLOLFk9bL6bQ.jpg'); background-size:cover; transform:translate(11vw,12vw);}
    #corn5{box-sizing:border-box; background:url('http://ekladata.com/_xUfOJ9nCgRCbENbZPWZrNp1smk.jpg'); background-size:cover; transform:translate(33vw,12vw);}
    #corn6{box-sizing:border-box; background:url('http://ekladata.com/TuJPrbobJ_FMg-E46BIsloWqrF8.jpg'); background-size:cover; transform:translate(0vw,24vw);}
    #corn7{box-sizing:border-box; background:url('http://ekladata.com/jxn1k_EbsQ-uwZrhowAX1lbwnUY.jpg'); background-size:cover; transform:translate(22vw,24vw);}
    #corn8{box-sizing:border-box; background:url('http://ekladata.com/rx3NBRqUuQXZVKNR1GFqkrlf9mI.jpg'); background-size:cover; transform:translate(44vw,24vw);}
    #corn1:hover,#corn2:hover,#corn3:hover,#corn4:hover,#corn5:hover,#corn6:hover,#corn7:hover,#corn8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>