03b.04.2024

Survol

<div style="width: 1000px; height: 563px; margin: 50px auto;">
<p id="pf0">&nbsp;</p>
<p id="pf1" class="pf">&nbsp;</p>
<p id="pf2" class="pf">&nbsp;</p>
<p id="pf3" class="pf">&nbsp;</p>
<p id="pf4" class="pf">&nbsp;</p>
<p id="pf5" class="pf">&nbsp;</p>
<p id="pf6" class="pf">&nbsp;</p>
<p id="pf7" class="pf">&nbsp;</p>
<p id="pf8" class="pf">&nbsp;</p>
<p id="pf9" class="pf">&nbsp;</p>
<p id="pf10" class="pf">&nbsp;</p>
</div>
<style><!--
#pf0{position:absolute; z-index:10; width:1000px; height:563px;}
.pf{position:absolute; box-sizing:border-box; width:1000px; height:563px; border-radius:50%; border:4px solid white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px black; background:url('http://ekladata.com/pn6jx-4e146qGBTbvEoCeAeyieI.jpg'); background-size:cover; transform-origin:center left; transition:all 2s;}
#pf1{transform:scale(1); box-shadow:4px 4px 8px black;}
#pf2{transform:scale(0.9);}
#pf3{transform:scale(0.8);}
#pf4{transform:scale(0.7);}
#pf5{transform:scale(0.6);}
#pf6{transform:scale(0.5);}
#pf7{transform:scale(0.4);}
#pf8{transform:scale(0.3);}
#pf9{transform:scale(0.2);}
#pf10{transform:scale(0.15);}
#pf0:hover~#pf2,#pf0:hover~#pf3,#pf0:hover~#pf4,#pf0:hover~#pf5,#pf0:hover~#pf6,#pf0:hover~#pf7,#pf0:hover~#pf8,#pf0:hover~#pf9,#pf0:hover~#pf10{transform:scale(1);}
--></style>