• Exemple 209

    5 images au ratio 16/9.

    Survol

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="noc0">Survol</p>
    <p id="noc1" class="noc">&nbsp;</p>
    <p id="noc2" class="noc">&nbsp;</p>
    <p id="noc3" class="noc">&nbsp;</p>
    <p id="noc4" class="noc">&nbsp;</p>
    <p id="noc5" class="noc">&nbsp;</p>
    </div>

    <style><!--
    #noc0{position:absolute; z-index:1; width:200px; transform:translate(400px,0px); font-size:40px; color:aqua; text-shadow:2px 2px black;}
    .noc{position:absolute; z-index:1; border-radius:50%; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; transition:all 1s linear;}
    #noc1{box-sizing:border-box; width:400px; height:400px; background:url('http://ekladata.com/RtGSDPB2KOpTXFDS5ACU2xUmxSs.jpg'); background-size:1000px 563px; background-position: -300px -100px ; transform:translate(300px,100px);}
    #noc2{box-sizing:border-box; width:200px; height:200px; background:url('http://ekladata.com/423nQDF8r6L4Q_Drx1cJufYrADk.jpg'); background-size:1000px 563px; background-position:-200px -80px; transform:translate(200px,80px);}
    #noc3{box-sizing:border-box; width:200px; height:200px; background:url('http://ekladata.com/4YK0xgA47PTq9tzhakPQyG4_x60.jpg'); background-size:1000px 563px; background-position:-600px -80px; transform:translate(600px,80px);}
    #noc4{box-sizing:border-box; width:200px; height:200px; background:url('http://ekladata.com/ik22-g1Khn2fo8HJfB3SEk5iuag.jpg'); background-size:1000px 563px; background-position:-200px -350px; transform:translate(200px,350px);}
    #noc5{box-sizing:border-box; width:200px; height:200px; background:url('http://ekladata.com/-ZeKaoEFBs0py6ZKpV4Dz6iE0iw.jpg'); background-size:1000px 563px; background-position:-600px -350px; transform:translate(600px,350px);}
    #noc1:hover,#noc2:hover,#noc3:hover,#noc4:hover,#noc5:hover{z-index:5; width:1000px; height:563px; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>