• abîme3.22.01.24

    J'ai modifié le ratio de mon image, passant de 16/9 à 4/3 en 800x600px

    SURVOL

     

     

     

     

     

     

     


    <div id="g0">
    <p id="g"><a style="margin: 0 10px 0 10px; font-size: 30px; color: white; text-shadow: 1px 1px black;">SURVOL</a></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>
    <p id="g6" class="gen">&nbsp;</p>
    <p id="g7" class="gen">&nbsp;</p>
    </div>
    <style><!--
    #g0{position:relative; overflow:hidden; background: url('http://ekladata.com/BLZxMrjcTY2i1hsvn9QOJypCGZo@800x600.jpg'); background-size: cover; width:800px; height:600px; border:3px solid white; box-shadow:4px 4px 8px black; text-align:left; margin:30px auto;}
    .gen{background: url('http://ekladata.com/BLZxMrjcTY2i1hsvn9QOJypCGZo@800x600.jpg'); background-size: cover; width:800x; height:600px; border-radius:50%; border:3px solid white; box-shadow:inset -6px -6px 8px black,inset 6px 6px 8px white; transition:all 2s linear;}
    #g{position:absolute; z-index:20; transform:translate(0px,0px); width:800px; height:600px;}
    #g1{position:absolute; z-index:1; width:700px; height:525px; transform:translate(50px,25px);}
    #g2{position:absolute; z-index:2; width:600px; height:450px; transform:translate(100px,25px);}
    #g3{position:absolute; z-index:3; width:500px; height:350px; transform:translate(150px,25px);}
    #g4{position:absolute; z-index:4; width:400px; height:300px; transform:translate(200px,25px);}
    #g5{position:absolute; z-index:5; width:300px; height:225px; transform:translate(250px,25px);}
    #g6{position:absolute; z-index:6; width:200px; height:150px; transform:translate(300px,25px);}
    #g7{position:absolute; z-index:7; width:100px; height:75px; transform:translate(350px,25px);}
    #g:hover ~ #g1{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g2{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g3{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g4{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g5{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g6{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    #g:hover ~ #g7{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    --></style>

    J'ai laissé les dernières lignes en CSS indépendantes mais, comme vous le voyez, elles sont identiques pour chacun de paragraphes g1 à g7.

    C'est plus clair si le nombre de vos images est différent du mien mais, on peut simplifier l'écriture pour la même animation.

    <div id="g0">
    <p id="g"><a style="margin: 0 10px 0 10px; font-size: 30px; color: white; text-shadow: 1px 1px black;">SURVOL</a></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>
    <p id="g6" class="gen">&nbsp;</p>
    <p id="g7" class="gen">&nbsp;</p>
    </div>
    <style><!--
    #g0{position:relative; overflow:hidden; background: url('http://ekladata.com/BLZxMrjcTY2i1hsvn9QOJypCGZo@800x600.jpg'); background-size: cover; width:800px; height:600px; border:3px solid white; box-shadow:4px 4px 8px black; text-align:left; margin:30px auto;}
    .gen{background: url('http://ekladata.com/BLZxMrjcTY2i1hsvn9QOJypCGZo@800x600.jpg'); background-size: cover; width:800x; height:600px; border-radius:50%; border:3px solid white; box-shadow:inset -6px -6px 8px black,inset 6px 6px 8px white; transition:all 2s linear;}
    #g{position:absolute; z-index:20; transform:translate(0px,0px); width:800px; height:600px;}
    #g1{position:absolute; z-index:1; width:700px; height:525px; transform:translate(50px,25px);}
    #g2{position:absolute; z-index:2; width:600px; height:450px; transform:translate(100px,25px);}
    #g3{position:absolute; z-index:3; width:500px; height:350px; transform:translate(150px,25px);}
    #g4{position:absolute; z-index:4; width:400px; height:300px; transform:translate(200px,25px);}
    #g5{position:absolute; z-index:5; width:300px; height:225px; transform:translate(250px,25px);}
    #g6{position:absolute; z-index:6; width:200px; height:150px; transform:translate(300px,25px);}
    #g7{position:absolute; z-index:7; width:100px; height:75px; transform:translate(350px,25px);}
    #g:hover ~ #g1,#g:hover ~ #g2,#g:hover ~ #g3,#g:hover ~ #g4,#g:hover ~ #g5,#g:hover ~ #g6,#g:hover ~ #g7{width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;}
    --></style>