• Montage 81

    8 + 1 image au ratio 16/9

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; background: url('http://ekladata.com/7D3hXXGxDCm6HvP0ZlLKvrOdRGE.jpg'); background-size: cover;">
    <p id="pro0">Survol</p>
    <p id="pro1" class="pro">&nbsp;</p>
    <p id="pro2" class="pro">&nbsp;</p>
    <p id="pro3" class="pro">&nbsp;</p>
    <p id="pro4" class="pro">&nbsp;</p>
    <p id="pro5" class="pro">&nbsp;</p>
    <p id="pro6" class="pro">&nbsp;</p>
    <p id="pro7" class="pro">&nbsp;</p>
    <p id="pro8" class="pro">&nbsp;</p>
    </div>

    <style><!--
    .pro{position:absolute; z-index:1; width:5vw; height:3.5vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; filter:grayscale(1); transition:all 1s linear;}
    #pro0{position:absolute; z-index:1; width:8vw; background:rgba(0,0,0,0.5); text-align:center; line-height:4.5vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(1vw,1vw);}
    #pro1{background:url('http://ekladata.com/ArQ9F6t8etCLxMTtgjwI8kPpCl4.jpg'); background-size:cover; transform:translate(3vw,29.5vw);}
    #pro2{background:url('http://ekladata.com/AoewKi6DpHsyXfZBH82sHRosfzE.jpg'); background-size:cover; transform:translate(10vw,29.5vw);}
    #pro3{background:url('http://ekladata.com/usvSyboQPJ89LKzWLNEFhBBobgw.jpg'); background-size:cover; transform:translate(17vw,29.5vw);}
    #pro4{background:url('http://ekladata.com/gOcjDDEahv4V5SVBe4wl34fRITI.jpg'); background-size:cover; transform:translate(24vw,29.5vw);}
    #pro5{background:url('http://ekladata.com/fQ7uBQsynuugwFYwtxj7JQNj8vM.jpg'); background-size:cover; transform:translate(31vw,29.5vw);}
    #pro6{background:url('http://ekladata.com/ci25rVQGXU7BAAy1ivmTQ6Q6zsI.jpg'); background-size:cover; transform:translate(38vw,29.5vw);}
    #pro7{background:url('http://ekladata.com/nk1xTaySca1mx3751Gp9AexYANI.jpg'); background-size:cover; transform:translate(45vw,29.5vw);}
    #pro8{background:url('http://ekladata.com/EgmvdxnlJM19T5b5WVkNkvMJS6Q.jpg'); background-size:cover; transform:translate(52vw,29.5vw);}
    #pro1:hover,#pro2:hover,#pro3:hover,#pro4:hover,#pro5:hover,#pro6:hover,#pro7:hover,#pro8:hover{z-index:5; width:60vw; height:33.755vw; border:none; box-shadow:none; filter:grayscale(0); transform:translate(0vw,0vw);}
    --></style>