-
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"> </p>
<p id="v2"> </p>
<p id="v3"> </p>
<p id="v4"> </p>
<p id="v5"> </p>
<p id="v6"> </p>
<p id="v7"> </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>