• Remise en place 2

    Essayons en arrondissant les morceaux... ! Image en 800x600px, morceaux en 400x200px.

    Survolez le montage.

     

     

     

     

     

     

     

    <div id="rt">
    <p id="rt0">&nbsp;</p>
    <p id="rt1" class="d">&nbsp;</p>
    <p id="rt2" class="d">&nbsp;</p>
    <p id="rt3" class="d">&nbsp;</p>
    <p id="rt4" class="d">&nbsp;</p>
    <p id="rt5" class="d">&nbsp;</p>
    <p id="rt6" class="d">&nbsp;</p>
    </div>

    <style><!--
    #rt{position:relative; width:800px; height:600px; background:url(http://ekladata.com/w3D2QA6MHwgAYj00R4FaDcjstMw/haze.jpg); border:6px ridge grey; margin:10px auto;}
    #rt0{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
    .d{background:url(http://ekladata.com/nwQXC_4RqymAAUgR55P6D8ouWFo/1130.jpg);}
    #rt1{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 0%; transition:all 2s linear; transform:translate(400px,400px);}
    #rt2{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 50%; transition:all 2s linear; transform:translate(400px,200px);}
    #rt3{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 100%; transition:all 2s linear; transform:translate(400px,0px);}
    #rt4{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 0%; transition:all 2s linear; transform:translate(0px,400px);}
    #rt5{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 50%; transition:all 2s linear; transform:translate(0px,200px);}
    #rt6{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 100%; transition:all 2s linear; transform:translate(0px,0px);}
    #rt0:hover ~ #rt1{transform:translate(0px,0px); border-radius:0%;}
    #rt0:hover ~ #rt2{transform:translate(0px,200px); border-radius:0%;}
    #rt0:hover ~ #rt3{transform:translate(0px,400px); border-radius:0%;}
    #rt0:hover ~ #rt4{transform:translate(400px,0px); border-radius:0%;}
    #rt0:hover ~ #rt5{transform:translate(400px,200px); border-radius:0%;}
    #rt0:hover ~ #rt6{transform:translate(400px,400px); border-radius:0%;}
    --></style>