• Remise en place 3

    Toujours dans des variantes pour images 800x600px; survolez les montages.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div id="gt">
    <p id="gt0">&nbsp;</p>
    <p id="gt1" class="g">&nbsp;</p>
    <p id="gt2" class="g">&nbsp;</p>
    <p id="gt3" class="g">&nbsp;</p>
    <p id="gt4" class="g">&nbsp;</p>
    <p id="gt5" class="g">&nbsp;</p>
    <p id="gt6" class="g">&nbsp;</p>
    </div>
    <style><!--
    #gt{position:relative; width:800px; height:600px; background:url(http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg); border:6px ridge grey; margin:10px auto;}
    #gt0{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
    .g{background:url(http://ekladata.com/4bQ4Qoa1nTwXRpergIJLJ32ezeQ/1324a.jpg);}
    #gt1{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 0%; transition:all 2s linear; transform:translate(400px,400px) rotatey(180deg);}
    #gt2{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 50%; transition:all 2s linear; transform:translate(400px,200px) rotatey(180deg);}
    #gt3{position:absolute; width:400px; height:200px; border-radius:50%; background-position:0% 100%; transition:all 2s linear; transform:translate(400px,0px) rotatey(180deg);}
    #gt4{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 0%; transition:all 2s linear; transform:translate(0px,400px) rotatey(180deg);}
    #gt5{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 50%; transition:all 2s linear; transform:translate(0px,200px) rotatey(180deg);}
    #gt6{position:absolute; width:400px; height:200px; border-radius:50%; background-position:100% 100%; transition:all 2s linear; transform:translate(0px,0px) rotatey(180deg);}
    #gt0:hover ~ #gt1{transform:translate(0px,0px) rotatey(0deg); border-radius:0%;}
    #gt0:hover ~ #gt2{transform:translate(0px,200px) rotatey(0deg); border-radius:0%;}
    #gt0:hover ~ #gt3{transform:translate(0px,400px) rotatey(0deg) ; border-radius:0%;}
    #gt0:hover ~ #gt4{transform:translate(400px,0px) rotatey(0deg); border-radius:0%;}
    #gt0:hover ~ #gt5{transform:translate(400px,200px) rotatey(0deg); border-radius:0%;}
    #gt0:hover ~ #gt6{transform:translate(400px,400px) rotatey(0deg) ; border-radius:0%;}
    --></style>