-
Loneci vignettes
Voici une version simplifiée des vignettes, disposées sur un trait et qui s'agrandissent au survol.
Le montage fait 800x600px + la bordure de 4px soit 808x608px.
<div id="aa">
<p id="a1"> </p>
<p id="a2"> </p>
<p id="a3"> </p>
<p id="a4"> </p>
<p id="a5"> </p>
<p id="a6"> </p>
<p id="a7"> </p>
</div>
<hr style="border:3px double grey;">
<p>...</p>
<style><!--
#aa{width:800px; height:600px; border:4px ridge grey; margin:5px auto; background:url(http://ekladata.com/v23Suxyuiaz3ZRyXjI7vzLJ0cLs.jpg); outline: double 30px #ffffff; outline-offset: -100px;}
#a1{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/yoyjc45BtrIy5gTLb-aerkq87rQ.jpg); transition:all 1s linear; transform:translate(180px,20px); background-size:cover;}
#a2{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/f7VCtZtn3zi1wz95mEYUWg-7VBs.jpg); transition:all 1s linear; transform:translate(450px,20px); background-size:cover;}
#a3{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/ju6iTI_yLHUJfyYrCZG-9r43_Ag.jpg); transition:all 1s linear; transform:translate(600px,200px); background-size:cover;}
#a4{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/7-eiO5j_Jq0htpZjB5pwdPcHjeY.jpg); transition:all 1s linear; transform:translate(450px,420px); background-size:cover;}
#a5{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/17Z7BNmeDCleZg20KRBSgpphbSM.jpg); transition:all 1s linear; transform:translate(180px,420px); background-size:cover;}
#a6{position:absolute; z-index:1; width:160px; height:120px; border:8px solid white; background:url(http://ekladata.com/zxqzWmoInuvTNMwUCDPB4qOpeaM.jpg); transition:all 1s linear; transform:translate(30px,200px); background-size:cover;}
#a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover, #a6:hover, #a7:hover{z-index:10; transform:translate(0px,0px); width:800px; height:600px; border:none;}
--></style>