• Vignettes pour Chris03.1150x647px

    Cette fidèle visiteuse, qui reprend certains de mes montages, publie ses photos en 1150x647px; voici donc le montage vignettes, simplifié et avec deux images animées (facultatif).

    Une de ces deux images animées ne fait que 800x450px, afin de rester nette et en dessous du poids limite de 10 Mo; dans cet exemple, le survol la fait se centrer mais si on place une image fixe en 1150x647px, à la place, il faudra modifier son animation spécifique par l'animation générale.

     

     

     

     

     

     

     

     

     

     

    Survolez les vignettes.

    <div id="a1">
    <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>
    <p id="a8">&nbsp;</p>
    <p id="a9">&nbsp;</p>
    <p id="a10">&nbsp;</p>
    <p id="a11">&nbsp;</p>
    <p id="a12">Survolez les vignettes.</p>
    </div>

    <style><!--
    #a1{width:1150px; height:647px; background:url(http://ekladata.com/LyYeAwVW2OuVL_tMa-64yww9hdc.jpg); margin:5px auto; border:4px ridge grey;}
    #a2{position:absolute; width:980px; height:530px; transform:translate(75px,35px); border:6px solid white;}
    #a3{position:absolute; width:610px; height:350px; transform:translate(260px,120px); border:6px solid white;}
    #a12{position:absolute; width:600px;transform:translate(260px,180px); text-align:center; font-size:25pt; color:white; text-shadow:2px 2px black;}
    #a4{position:absolute; width:230px; height:130px; transform:translate(50px,10px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/jQaBI2KhydZVW78P_Fq4QwxPqeM.jpg); background-size:cover; transition:all 1s linear;}
    #a5{position:absolute; width:230px; height:130px; transform:translate(50px,450px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/0enUT-BSY4fKGqfgswuaFuE8Rbk.jpg); background-size:cover; transition:all 1s linear;}
    #a6{position:absolute; width:230px; height:130px; transform:translate(850px,10px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/0enUT-BSY4fKGqfgswuaFuE8Rbk.jpg); background-size:cover; transition:all 1s linear;}
    #a7{position:absolute; width:230px; height:130px; transform:translate(850px,450px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/DrzLuaCmGBT1ifhCPGGeg69Cm5k.jpg); background-size:cover; transition:all 1s linear;}
    #a8{position:absolute; width:230px; height:130px; transform:translate(440px,10px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/4h2lvV3h1I-GWPTjL00H2IpIlV0.jpg); background-size:cover; transition:all 1s linear;}
    #a9{position:absolute; width:230px; height:130px; transform:translate(440px,450px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/JBrKsiSeOSlvHJYIMAhWilhjyTQ.jpg); background-size:cover; transition:all 1s linear;}
    #a10{position:absolute; width:230px; height:130px; transform:translate(50px,230px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/xHV_-vjv_iWusBnZ1fbdq_OjmZI.gif); background-size:cover; transition:all 1s linear;}
    #a11{position:absolute; width:230px; height:130px; transform:translate(850px,230px); border:6px solid white; box-shadow:4px 4px 8px black; background:url(http://ekladata.com/gh59t35CL8ZQwYGU0A6JPWV6NRc.gif); background-size:cover; transition:all 1s linear;}
    #a4:hover, #a5:hover, #a6:hover, #a7:hover,  #a8:hover, #a9:hover, #a11:hover{z-index:10;width:1150px; height:647px; transform:translate(0px,0px); border:none; box-shadow:0px 0px 0px black;}
    #a10:hover{z-index:10;width:800px; height:450px; transform:translate(170px,100px);}
    --></style>