• 04.04.2024

     Survol.

    Les dimensions sont ajustables à vos besoins.

     

     

     

     

     

     

     

     

     

     



    <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>
    </div>
    <style><!--
    #pf0{position:absolute; z-index:10; width:1000px; height:563px;}
    .pf{position:absolute; box-sizing:border-box; width:563px; height:563px; margin-left:215px; border-radius:50%; border:4px solid white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px black; background:url('http://ekladata.com/5eqTDuR4sIndnzBngrNdfPp7Kko.jpg'); background-size:cover; background-position:center center; 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);}
    #pf0:hover~#pf1,#pf0:hover~#pf2,#pf0:hover~#pf3,#pf0:hover~#pf4,#pf0:hover~#pf5,#pf0:hover~#pf6,#pf0:hover~#pf7,#pf0:hover~#pf8,#pf0:hover~#pf9{transform:scale(1); width: 1000px; height: 563px;border-radius:0%; margin-left:0px;}
    --></style>