• Faux Droste 2

    Survolez le montage.

     

     

     

     

     

     

     


    <div id="dr0">
    <p id="dr7">&nbsp;</p>
    <p id="dr1">&nbsp;</p>
    <p id="dr2">&nbsp;</p>
    <p id="dr3">&nbsp;</p>
    <p id="dr4">&nbsp;</p>
    <p id="dr5">&nbsp;</p>
    <p id="dr6">&nbsp;</p>
    </div>

    <style><!--
    #dr0{position:relative; width:800px; height:600px; border:8px ridge grey; margin:10px auto; }
    #dr1{position:absolute; transform:translate(0px,0px); transition:all 2s linear; width:800px; height:600px; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; box-sizing:border-box;}
    #dr2{position:absolute; z-index:2; transform:translate(140px,100px); transition:all 2s linear; width:600px; height:450px; border-radius:50%; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; border-right:9px solid white; border-top:9px solid white; box-sizing:border-box;}
    #dr3{position:absolute; z-index:2; transform:translate(170px,120px); transition:all 2s linear; width:400px; height:300px; border-radius:50%; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; border-left:8px solid white; border-bottom:8px solid white; box-sizing:border-box;}
    #dr4{position:absolute; z-index:2; transform:translate(350px,240px); transition:all 2s linear; width:200px; height:150px; border-radius:50%; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; border-right:7px solid white; border-top:7px solid white; box-sizing:border-box;}
    #dr5{position:absolute; z-index:2; transform:translate(370px,250px); transition:all 2s linear; width:100px; height:75px; border-radius:50%; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; border-left:6px solid white; border-bottom:6px solid white; box-sizing:border-box;}
    #dr6{position:absolute; z-index:2; transform:translate(410px,280px); transition:all 2s linear; width:50px; height:38px; border-radius:50%; background:url(http://ekladata.com/rmMdADUA2Ll8cEGM36oqJZR8eAY/1231.jpg); background-size:cover; border-right:5px solid white; border-left:5px solid white; border-top:5px solid white; box-sizing:border-box;}
    #dr7{position:absolute; z-index:10; width:800px; height:600px; transform:translate(0px,0px);}
     #dr7:hover ~ #dr2, #dr7:hover ~ #dr3, #dr7:hover ~ #dr4, #dr7:hover ~ #dr5, #dr7:hover ~ #dr6{width:800px; height:600px; border:10px solid white; transform:translate(0px,0px); border-radius:0%;}
    --></style>