• Art.01.11.21

    Survol vignettes avec retour soit en survolant le bouton, soit en sortant du survol image. 5 images au ratio 16/9.

    Survol pour Retour


    <p id="pas0">Survol pour Retour</p>
    <div style="width: 1000px; height: 200px; margin: 2% auto; text-align: left;"><img id="pas1" class="pas" src="http://ekladata.com/xoVU3W9NO-FpxOW38THhkg93yK0.jpg" alt="" /> <img id="pas2" class="pas" src="http://ekladata.com/Ort8lXhao4vVf-rHj65aMQ9HyEk.jpg" alt="" /> <img id="pas3" class="pas" src="http://ekladata.com/tbdM8enk4agfl9rG22VVG8OsUrM.jpg" alt="" /> <img id="pas4" class="pas" src="http://ekladata.com/GN-jDDy0NEmVsysYxvJkD2Z95PI.jpg" alt="" /> <img id="pas5" class="pas" src="http://ekladata.com/A1s1y6jyq6yC2XQkUHFS-6cYxYk.jpg" alt="" /></div>
    <br>....
    <style><!--
    #pas0{position:relative; z-index:10; width:15%; height:3%; border-radius:30%; border:2px solid black; background:lime; text-align:center; font-size:1.2vw; margin:0 0 0 40%;}
    .pas{position:absolute; z-index:1; width:100%; height:56.25%; transition:all 1s;}
    #pas1{clip-path:circle(5% at 25% 25%); left:0; top:10%;}
    #pas2{clip-path:circle(5% at 35% 25%); left:0; top:10%;}
    #pas3{clip-path:circle(5% at 45% 25%); left:0; top:10%;}
    #pas4{clip-path:circle(5% at 55% 25%); left:0; top:10%;}
    #pas5{clip-path:circle(5% at 65% 25%); left:0; top:10%;}
    #pas1:hover,#pas2:hover,#pas3:hover,#pas4:hover,#pas5:hover{z-index:5; clip-path:circle(100% at 50% 50%);}
    --></style>