• Chris 03

    Voilà le code d'un montage proposé, pour 7 images en 1150x647px; je n'ai pas ajouté de bordure au montage pour rester dans ces dimensions.

    La taille des vignettes est à ajuster à vos goûts, en fonction de leur nombre: 6 en 120x70px.

    Survolez les vignettes.

     

     

     

     

     

     

    <div id="fl">
    <p id="fl1">&nbsp;</p>
    <p id="fl2">&nbsp;</p>
    <p id="fl3">&nbsp;</p>
    <p id="fl4">&nbsp;</p>
    <p id="fl5">&nbsp;</p>
    <p id="fl6">&nbsp;</p>
    </div>

    <style><!--
    #fl{width:1150px; height:647px; margin:10px auto; background:url(http://ekladata.com/Y7cK41-cmiKwGHE1CK4IBGPvkoM.jpg);}
    #fl1{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(30px,560px); transition:all 1s linear; background:url(http://ekladata.com/68HVV3pvXGBMInBSRipMRuJhMT4.jpg); background-size:cover;}
    #fl2{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(214px,560px); transition:all 1s linear; background:url(http://ekladata.com/V3mkmu4v_5WvVap1ECCvY-qug_0.jpg); background-size:cover;}
    #fl3{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(396px,560px); transition:all 1s linear; background:url(http://ekladata.com/U8_5rA7gDsaD2SvnlzVoMzA-E6I.jpg); background-size:cover;}
    #fl4{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(580px,560px); transition:all 1s linear; background:url(http://ekladata.com/lxhkJycgpnsOscO0AjLspqp6FBg.jpg); background-size:cover;}
    #fl5{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(764px,560px); transition:all 1s linear; background:url(http://ekladata.com/XT-4TuAZIG7Sp07W26tsC56dfsU.jpg); background-size:cover;}
    #fl6{position:absolute; z-index:1;width:120px; height:70px; border:2px solid white; transform:translate(948px,560px); transition:all 1s linear; background:url(http://ekladata.com/otoAJ4pBtbz_sX6MFPWi6uIVhzk.jpg); background-size:cover;}

    #fl1:hover, #fl2:hover, #fl3:hover, #fl4:hover, #fl5:hover, #fl6:hover{z-index:10; width:1150px; height:647px; border:none; transform:translate(0px,0px); }
    --></style>