• Montage 2

    Nous pouvons placer des images en 450x600px, comme dans le montage1, en modifiant les dimensions mais sur le même principe.

    Code:
    <div id="fdv"><img id="m1" src="http://ekladata.com/Zb02ltucTSMI9tSsqe_xkk4p4iU/27.jpg" alt="" /><img id="m2" src="http://ekladata.com/eiA_ORRKKeeJZCXTWvc7KYYHVUg/38.jpg" alt="" /><img id="m3" src="http://ekladata.com/DaqUJ0tKWEfNvZmprlUFvwAoc4k/41.jpg" alt="" /><img id="m4" src="http://ekladata.com/6r-S9Mc3BDHbucZZufK46QDQUxg/43.jpg" alt="" /><img id="m5" src="http://ekladata.com/ftMlWPOTYrgzWlpG73G5GRSWyUE/46.jpg" alt="" /><img id="m6" src="http://ekladata.com/RQhy6_Dumi4CHmjurvU1-UJhthg/48.jpg" alt="" /><img id="m7" src="http://ekladata.com/DYBZAaG5_otLQ5o_go1s0T2iJAg/49.jpg" alt="" /></div>
    <style><!--
    #fdv{width:450px; height:600px; border:3px double grey; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/bluebkg.jpg'); margin:10px auto;}
    #m1{transition:all 1s linear; position:absolute; transform:translate(0px,30px); width:90px; height:120px;}
    #m2{transition:all 1s linear; position:absolute; transform:translate(0px,170px); width:90px; height:120px;}
    #m3{transition:all 1s linear; position:absolute; transform:translate(0px,310px); width:90px; height:120px;}
    #m4{transition:all 1s linear; position:absolute; transform:translate(0px,450px); width:90px; height:120px;}
    #m5{transition:all 1s linear; position:absolute; transform:translate(360px,30px); width:90px; height:120px;}
    #m6{transition:all 1s linear; position:absolute; transform:translate(360px,170px); width:90px; height:120px;}
    #m7{transition:all 1s linear; position:absolute; transform:translate(360px,310px); width:90px; height:120px;}  
     
    #m1:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m2:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m3:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m4:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m5:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m6:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    #m7:hover{ transform:translate(0px,0px); width:450px; height:600px; z-index:5;}
    --></style>
    Ici, un nombre impair de photos mais on peut en ajouter ou en retirer en modifiant la taille des vignettes.
    Vous remarquerez le code au survol:z-index:5; qui fait s'agrandir la vignette au dessus de s autres.