• Avancement au clic

    Le survol est pratique car il suffit d'en sortir pour revenir en position de départ; par contre, avec des petits écrans, les éléments sont très proches et donc difficiles à survoler individuellement.

    Le clic demande un second clic pour revenir en position de départ mais seul le clic sur l'élément choisi lance son animation.

    Voici un diaporama au clic, en CSS; les dimensions sont en 80vw/45vw, ratio 16/9.

    Si vous voulez les modifier, par exemple:  partout où vous trouvez 80vw dans le code, écrivez 60vw à la place et partout où vous trouvez 45vw dans le code, écrivez à la place 33.75vw, de façon à conserver le ratio des images en 16/9.

    Si vous images sont d'un autre ratio, calculez les valeurs qui vous conviennent.

    Remplacez mes adresses-images en bleu par les vôtres.

    Avancement au clic.

    <div style="width: 80vw; height: 45vw; margin: 2vh auto; border: 0.4vh ridge white; box-shadow: 0.4vh 0.4vh 0.6vh black;"><input id="sc1" class="sc" type="text" /><input id="sc2" class="sc" type="text" /><input id="sc3" class="sc" type="text" /><input id="sc4" class="sc" type="text" /><input id="sc5" class="sc" type="text" /><input id="sc6" class="sc" type="text" /><input id="sc7" class="sc" type="text" /><input id="sc8" class="sc" type="text" /><input id="sc9" class="sc" type="text" /><input id="sc10" class="sc" type="text" />
    <p id="sc0">Avancement au clic.</p>
    </div>

    <style><!--
    #sc0{position:absolute;z-index:1; width:80vw; height:45vw; font-size: 1.5vw; color:white; text-shadow:0.1vh 0.1vh black; background: url('http://ekladata.com/-FN0ByBHbSoy6XnRxhBogKX4xRM.jpg'); background-size: cover;}
    .sc{position:absolute; width:80vw; height:45vw; transition:z-index 0s linear, opacity 0.5s linear; opacity:0;}
    .sc:focus ~ #sc0{opacity:0;}

    #sc1{z-index:5; background:url('http://ekladata.com/-FN0ByBHbSoy6XnRxhBogKX4xRM.jpg'); background-size: cover;}
    #sc2{z-index:1; background:url('http://ekladata.com/kUJ1IyzQ_vHKQzY-dPe9x4-YKvE.jpg'); background-size: cover;}
    #sc3{z-index:1; background:url('http://ekladata.com/0DDqaH3KIM7_zzJIdgEFp9Pijkc.jpg'); background-size: cover;}
    #sc4{z-index:1; background:url('http://ekladata.com/Da3Lt2eGFJ4GDnoLZBvfxjJk_nc.jpg'); background-size: cover;}
    #sc5{z-index:1; background:url('http://ekladata.com/sUoo7GSpXU2X4Ro893DcqA7g82c.jpg'); background-size: cover;}
    #sc6{z-index:1; background:url('http://ekladata.com/wpA1sSG7THARY0r2erFPw7pHR-8.jpg'); background-size: cover;}
    #sc7{z-index:1; background:url('http://ekladata.com/R0Kt0cw9255kR3iP2EOdGFa6xF4.jpg'); background-size: cover;}
    #sc8{z-index:1; background:url('http://ekladata.com/5OeCy2dextkpzs2N9kRQuYZG6D0.jpg'); background-size: cover;}
    #sc9{z-index:1; background:url('http://ekladata.com/jiID9jzL9Uehrs63tZ_YPOeF-YE.jpg'); background-size: cover;}
    #sc10{z-index:1; background:url('http://ekladata.com/7Yw_Y517YNnglNzWL10wi5iT75Y.jpg'); background-size: cover;}

    #sc1:focus ~ #sc2,#sc2:focus ~ #sc3,#sc3:focus ~ #sc4,#sc4:focus ~ #sc5,#sc5:focus ~ #sc6,#sc6:focus ~ #sc7,#sc7:focus ~ #sc8,#sc8:focus ~ #sc9,#sc9:focus ~ #sc10{z-index:10;opacity:1;}
    #sc10:focus ~ #sc0{opacity:1;}
    --></style>