• Type 2.800x600

    5 images en 800x600px pour un montage de cette même dimension.

    Survoler chaque partie.

     

     

     

     

     


    <div id="a0">
    <p id="a1">Survoler chaque partie.</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>
    </div>

    <style><!--
    #a0{width:800px; height:600px; margin:5px auto;}
    #a1{position:absolute; z-index:1; width:350px; height:60px; transform:translate(200px,25px); text-align:center; font-size:25pt; color:white; text-shadow:2px 2px black;}
    #a2{position:absolute; z-index:1; width:350px; height:350px; border-radius:50%; transform:translate(0px,124px); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/oPjp5A_bVz0zOmVmwjKZ_WQrUIU.jpg'); background-position:0% 50%; transition:all 1s linear;}
    #a3{position:absolute; z-index:2; width:250px; height:250px; border-radius:50%; transform:translate(150px,174px); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/acXT0jEkRWPr_VynXdyPvOCPY-0.jpg'); background-position:23% 50%; transition:all 1s linear;}
    #a4{position:absolute; z-index:3; width:200px; height:200px; border-radius:50%; transform:translate(300px,200px); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/-vSBFw9UOP_KYtonS34I5o66Lt0.jpg'); background-position:50% 50%; transition:all 1s linear;}
    #a5{position:absolute; z-index:2; width:250px; height:250px; border-radius:50%; transform:translate(400px,174px); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/xZSJr4xXnEjrEw8FrCWMJ7EInpc.jpg'); background-position:73% 50%; transition:all 1s linear;}
    #a6{position:absolute; z-index:1; width:350px; height:350px; border-radius:50%; transform:translate(450px,124px); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/AP677rWWrLbnjzZjKwlVR765DKQ.jpg'); background-position:100% 50%; transition:all 1s linear;}
    #a2:hover,#a3:hover,#a4:hover,#a5:hover,#a6:hover {z-index:10; transform:translate(0px,0px); width:800px; height:600px; border-radius:0%;}
    --></style>