• 21 mai 2016/3

    Reprise du montage précédent en 800x600px, avec positionnement des vignettes différent, à adapter à vos photos.
    Survolez les vignettes.

     

     

     

     

     

     

     


    <div id="mtg">
    <p id="v1">&nbsp;</p>
    <p id="v2">&nbsp;</p>
    <p id="v3">&nbsp;</p>
    <p id="v4">&nbsp;</p>
    <p id="v5">&nbsp;</p>
    <p id="v6">&nbsp;</p>
    <p id="v7">&nbsp;</p>
    </div>

    <style><!--
    #mtg{position:relative; width:800px; height:600px; margin:10px auto; border:6px ridge grey; margin:5px auto; transform:translate(10px auto); background:url(http://ekladata.com/ss2uMhiVwgbrLxkUI11mIHZxtrc/1269.jpg);}
    #v1{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(540px,10px); transition:all 1.5s linear; background:url(http://ekladata.com/rbVkLWghaNnO_ZcKff-N-tVizOE/1263.jpg); background-size:cover;}
    #v2{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(630px,10px); transition:all 1.5s linear; background:url(http://ekladata.com/xFh5jN9WIgtQl0LDbbtBGLS6518/1270.jpg); background-size:cover;}
    #v3{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(720px,10px); transition:all 1.5s linear; background:url(http://ekladata.com/f82Wy1AYguWmQzyKH7G7uWv4EU8/1278.jpg); background-size:cover;}
    #v4{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(720px,80px); transition:all 1.5s linear; background:url(http://ekladata.com/uSHgGubNZb0LfMzBGySlGY4RGnw/1282.jpg); background-size:cover;}
    #v5{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(720px,150px); transition:all 1.5s linear; background:url(http://ekladata.com/yRvz9GbUEGu059hPqXhbZOCK0WE/1299.jpg); background-size:cover;}
    #v6{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(720px,220px); transition:all 1.5s linear; background:url(http://ekladata.com/aFqPNtkMaP2P2F8ZTLHcmhx66jU/1301.jpg); background-size:cover;}
    #v7{position:absolute; z-index:1; width:60px; height:45px; border:2px solid white; transform:translate(720px,290px); transition:all 1.5s linear; background:url(http://ekladata.com/s1U64_u0v2uTqP2SI5-WxQcRxIo/1305.jpg); background-size:cover;}

    #v1:hover, #v2:hover, #v3:hover, #v4:hover, #v5:hover, #v6:hover, #v7:hover{z-index:10; width:800px; height:600px; border:0px; transform:translate(0px,0px);}
    --></style>