• 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">&nbsp;</p>
    <p id="a2">&nbsp;</p>
    <p id="a3">&nbsp;</p>
    <p id="a4">&nbsp;</p>
    <p id="a5">&nbsp;</p>
    <p id="a6">&nbsp;</p>
    <p id="a7">&nbsp;</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>