• Montage 93

     8 images au ratio 16/9 très légèrement modifiées par le code.

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 34vw; margin: 1vh auto; text-align: center;">
    <p id="vd1" class="vd">&nbsp;</p>
    <p id="vd2" class="vd">&nbsp;</p>
    <p id="vd3" class="vd">&nbsp;</p>
    <p id="vd4" class="vd">&nbsp;</p>
    <p id="vd5" class="vd">&nbsp;</p>
    <p id="vd6" class="vd">&nbsp;</p>
    <p id="vd7" class="vd">&nbsp;</p>
    <p id="vd8" class="vd">&nbsp;</p>
    </div>
    <hr style="border: 0.3vh double grey;" />
    <p>...</p>
    <style><!--
    .vd{position:absolute; z-index:1; width:11vw; height:13vw; border:2vw ridge grey; transition:transform 1s linear, width 1s linear, height 1s linear, border 1s linear, background 1s linear, z-index 1s linear;}
    #vd1{background:url('http://ekladata.com/YaVyaslEjTibjhMygcbapTF04co.jpg'); background-size:60vw 34vw; background-position:-2vw -2vw; transform:translate(0vw,0vw);}
    #vd2{background:url('http://ekladata.com/E-7sYu07i-OAJ2R3cjzn4HiJ0mU.jpg'); background-size:60vw 34vw; background-position:-17vw -2vw; transform:translate(15vw,0vw);}
    #vd3{background:url('http://ekladata.com/gS1GYc7YUM4aaSQuItYBWgsVo00.jpg'); background-size:60vw 34vw; background-position:-32vw -2vw; transform:translate(30vw,0vw);}
    #vd4{background:url('http://ekladata.com/bGpRHo4sxTP096wb6M83XSOyIC4.jpg'); background-size:60vw 34vw; background-position:-47vw -2vw; transform:translate(45vw,0vw);}
    #vd5{background:url('http://ekladata.com/6bArG2R8gkjm8fG9BbPz0TMYmG0.jpg'); background-size:60vw 34vw; background-position:-2vw -19vw; transform:translate(0vw,17vw);}
    #vd6{background:url('http://ekladata.com/SxNMeINjOaSpQ4hIkWYNuQVvKqI.jpg'); background-size:60vw 34vw; background-position:-17vw -19vw; transform:translate(15vw,17vw);}
    #vd7{background:url('http://ekladata.com/fdUfnd0zwjrC7hTZwDgJnWi8w9c.png'); background-size:60vw 34vw; background-position:-32vw -19vw; transform:translate(30vw,17vw);}
    #vd8{background:url('http://ekladata.com/XX1l6OfZL5XmMNvrOu4SCMN0JsY.jpg'); background-size:60vw 34vw; background-position:-47vw -19vw; transform:translate(45vw,17vw);}
    #vd1:hover,#vd2:hover,#vd3:hover,#vd4:hover,#vd5:hover,#vd6:hover,#vd7:hover,#vd8:hover{z-index:5; width:60vw; height:34vw; border:0vw ridge grey; background-position:0vw 0vw;transform:translate(0vw,0vw);}
    --></style>