• Animation 11 abyme CSS

    A partir du même principe, on peut imaginer bien des montages personnels et je crois que je vais arrêter sur celui-ci, tout en restant à votre disposition si vous avez une idée de montage, que vous n'arrivez pas à réaliser.
    Cela commence à devenir répétitif pour moi; merci à Christine pour cette idée de réalisation.

    Survolez cette photo.

     

     

     

     

     

     


    <div id="g0" class="gen">
    <p id="g">&nbsp;</p>
    <p id="g1" class="gen">&nbsp;</p>
    <p id="g2" class="gen">&nbsp;</p>
    <p id="g3" class="gen">&nbsp;</p>
    <p id="g4" class="gen">&nbsp;</p>
    <p id="g5" class="gen">&nbsp;</p>
    </div>
    <style><!--
    .gen{background: url('http://ekladata.com/1CD-KyCrozXrmfV4xD7E4YXwp7g/1245.jpg'); background-size: cover; width:800px; height:600px; border-radius:50%; overflow:hidden;}
    #g0{position:relative; width:800px; height:600px; border-radius:50%; margin:10px auto;}
    #g{position:absolute; z-index:10; transform:translate(0px,0px) ; width:800px; height:600px; border-radius:50%; border:6px ridge grey; box-sizing:border-box;}
    #g1, #g2, #g3,#g4, #g5{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(0px,0px);}
    #g:hover{border-radius:50%;}
    #g:hover ~ #g0{border-radius:50%;}
    #g:hover ~ #g1{filter:grayscale(1); -webkit-filter:grayscale(1);}
    #g:hover ~ #g2{width:700px; height:525px; border-radius:50%; transform:translate(50px,37px); border:3px solid white; filter:grayscale(0.8); -webkit-filter:grayscale(0.8);}
    #g:hover ~ #g3{width:600px; height:500px; border-radius:50%; transform:translate(100px,50px); border:3px solid white; filter:grayscale(0.6); -webkit-filter:grayscale(0.6);}
    #g:hover ~ #g4{width:450px; height:450px; border-radius:50%; transform:translate(175px,75px); border:3px solid white; filter:grayscale(0.4); -webkit-filter:grayscale(0.4);}
    #g:hover ~ #g5{width:400px; height:400px; border-radius:50%; transform:translate(200px,100px); border:3px solid white; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black;}
    --></style>