-
Faux Droste 2
Survolez le montage.
<div id="dr0">
<p id="dr7"> </p>
<p id="dr1"> </p>
<p id="dr2"> </p>
<p id="dr3"> </p>
<p id="dr4"> </p>
<p id="dr5"> </p>
<p id="dr6"> </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>