• Montage3

    Une fidèle visiteuse préfère les vignettes en rond, alors, survolez-les et visitez Montréal les sources. 26510 !

    Code.
    <div id="fdr"><img id="a1" src="http://ekladata.com/n5R2DZkIS3EVRLRjffqSVs-FDYo/5521.jpg" alt="" /> <img id="a2" src="http://ekladata.com/H613HBqCpAnhzj2-31_v9NDCeZA/5525.jpg" alt="" /> <img id="a3" src="http://ekladata.com/UYBnU9Jd9MzFiyWgPy0I2pAZX8w/5528.jpg" alt="" /> <img id="a4" src="http://ekladata.com/vcLHOuf43s0OghAwYWAVo16ZiCw/5529.jpg" alt="" /> <img id="a5" src="http://ekladata.com/aGwcK4Ey5F0b6XtTfDw2_AhaQ4s/5530.jpg" alt="" /><img id="a6" src="http://ekladata.com/kWY_Abr2EUmlQX7JuviGiLZeJFQ/5531.jpg" alt="" /><img id="a7" src="http://ekladata.com/k9YTg2iNdywo90AFUDlQMJU00sg/5536.jpg" alt="" /><img id="a8" src="http://ekladata.com/jfmUr1_mN4n8RJBjlXgPfOHhC9c/5537.jpg" alt="" /><img id="a9" src="http://ekladata.com/5OvMPtnk70NDx5BJuMskmacLo5g/5542.jpg" alt="" /></div>
    <style><!--
    #fdr{width:1000px; height:563px; border:3px double white; box-shadow:4px 4px black; margin:10px auto;}
    #a1{position:absolute; width:1000px; height:563px; filter:grayscale(0.5); -webkit-filter:grayscale(0.5); opacity:0.5;}
    #a2{transition:all 2s linear; position:absolute; transform:translate(400px,0px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a3{transition:all 2s linear; position:absolute; transform:translate(845px,205px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a4{transition:all 2s linear; position:absolute; transform:translate(400px,410px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a5{transition:all 2s linear; position:absolute; transform:translate(0px,205px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a6{transition:all 2s linear; position:absolute; transform:translate(170px,40px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a7{transition:all 2s linear; position:absolute; transform:translate(680px,40px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a8{transition:all 2s linear; position:absolute; transform:translate(680px,370px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
    #a9{transition:all 2s linear; position:absolute; transform:translate(170px,370px); width:150px; height:150px; border:3px solid white; border-radius:50%;}
     #a2:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a3:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a4:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a5:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a6:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a7:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a8:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
     #a9:hover{transform:translate(-3px,-3px); width:1000px; height:563px; border-radius:0%; z-index:5;}
    --></style>
    ...
    Hormis les positionnement et les vignettes rondes, vous retrouvez le principe des montages précédents.