• 10 img vert stor

    Une amélioration proposée par Stormalo, arrangée à ma sauce: l'ajout d'un descriptif, qui peut être sur l'image ou à côté, selon le montage.

    A

    “Qui fait confiance au monde sera trahi.”

    B

    “Ne mettez pas votre confiance dans l'argent, mais mettez votre argent en confiance.”

    C

    “Fais confiance à Dieu, mais ferme ta voiture à clé.”

    D

    “Le mariage, la confiance n'y est pas. Il faut des témoins, comme dans les accidents.”

    E

    “Excès de confiance, l'échec sera ta doléance.”

    F

    “La confiance se gagne en gouttes et se perd en litres.”

    G

    “La confiance, d'accord, mais c'est quand même ce qui fait les cocus.”

    H

    “Faire confiance aux hommes, c’est déjà se faire tuer un peu.”

    I

    “Je fais confiance aux électeurs Et j'en profite pour faire mon beurre.”

    J

    “Il avait autant de confiance dans le système judiciaire que dans les contes de fées.”

    K

    “Ne jamais faire confiance à un mari quand il est loin ni à un célibataire quand il est près.”

    Clic sur chaque bouton pour centrer une image puis survol de l'image pour l'agrandir.
    Ajout citation.


    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid black; margin: 2vh auto; background: url('http://ekladata.com/ku-6ewMoLGv750LjIVztqLIpjao@1152x648.jpg'); background-size: 60vw 33.75vw;"><input id="bt1" class="bt" type="text" value="A" /><input id="bt2" class="bt" type="text" value="B" /><input id="bt3" class="bt" type="text" value="C" /><input id="bt4" class="bt" type="text" value="D" /><input id="bt5" class="bt" type="text" value="E" /><input id="bt6" class="bt" type="text" value="F" /><input id="bt7" class="bt" type="text" value="G" /><input id="bt8" class="bt" type="text" value="H" /><input id="bt9" class="bt" type="text" value="I" /><input id="bt10" class="bt" type="text" value="J" /><input id="bt11" class="bt" type="text" value="k" />
    <p id="cs1" class="cs">A</p>
    <p id="cs1a">&ldquo;Qui fait confiance au monde sera trahi.&rdquo;</p>
    <p id="cs2" class="cs">B</p>
    <p id="cs2a">&ldquo;Ne mettez pas votre confiance dans l'argent, mais mettez votre argent en confiance.&rdquo;</p>
    <p id="cs3" class="cs">C</p>
    <p id="cs3a">&ldquo;Fais confiance &agrave; Dieu, mais ferme ta voiture &agrave; cl&eacute;.&rdquo;</p>
    <p id="cs4" class="cs">D</p>
    <p id="cs4a">&ldquo;Le mariage, la confiance n'y est pas. Il faut des t&eacute;moins, comme dans les accidents.&rdquo;</p>
    <p id="cs5" class="cs">E</p>
    <p id="cs5a">&ldquo;Exc&egrave;s de confiance, l'&eacute;chec sera ta dol&eacute;ance.&rdquo;</p>
    <p id="cs6" class="cs">F</p>
    <p id="cs6a">&ldquo;La confiance se gagne en gouttes et se perd en litres.&rdquo;</p>
    <p id="cs7" class="cs">G</p>
    <p id="cs7a">&ldquo;La confiance, d'accord, mais c'est quand m&ecirc;me ce qui fait les cocus.&rdquo;</p>
    <p id="cs8" class="cs">H</p>
    <p id="cs8a">&ldquo;Faire confiance aux hommes, c&rsquo;est d&eacute;j&agrave; se faire tuer un peu.&rdquo;</p>
    <p id="cs9" class="cs">I</p>
    <p id="cs9a">&ldquo;Je fais confiance aux &eacute;lecteurs Et j'en profite pour faire mon beurre.&rdquo;</p>
    <p id="cs10" class="cs">J</p>
    <p id="cs10a">&ldquo;Il avait autant de confiance dans le syst&egrave;me judiciaire que dans les contes de f&eacute;es.&rdquo;</p>
    <p id="cs11" class="cs">K</p>
    <p id="cs11a">&ldquo;Ne jamais faire confiance &agrave; un mari quand il est loin ni &agrave; un c&eacute;libataire quand il est pr&egrave;s.&rdquo;</p>
    <p id="cc">Clic sur chaque bouton pour centrer une image puis survol de l'image pour l'agrandir.</p>
    </div>

    <style><!--
    .bt{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:50%; text-align:center; font-size:1.5vw;}
    #bt1{transform:translate(57vw,1vw);}
    #bt2{transform:translate(57vw,3vw);}
    #bt3{transform:translate(57vw,5vw);}
    #bt4{transform:translate(57vw,7vw);}
    #bt5{transform:translate(57vw,9vw);}
    #bt6{transform:translate(57vw,11vw);}
    #bt7{transform:translate(57vw,13vw);}
    #bt8{transform:translate(57vw,15vw);}
    #bt9{transform:translate(57vw,17vw);}
    #bt10{transform:translate(57vw,19vw);}
    #bt11{transform:translate(57vw,21vw);}
    .cs{position:absolute; z-index:1; width:7vw; height:7vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:50%; background-size:19vw 33.8vw; font-size:1.5vw; color:white; text-align:center;transition:all 1s linear;}
    #cs1{background:url('http://ekladata.com/BlwVC-WUkEBAFMXbn6dvA5bQFKo.jpg'); background-position:50% 50%; transform:translate(1vw,1vw);}
    #cs1a,#cs2a,#cs3a,#cs4a,#cs5a,#cs6a,#cs7a,#cs8a,#cs9a,#cs10a,#cs11a{position:absolute; z-index:1; width:19vw; height:auto; font-size:1vw; text-align:center; color:transparent; transform:translate(20vw,0.5vw); transition:all 1s linear 0.5s;}
    #cs2{background:url('http://ekladata.com/tWDLnIYVYeQ7ZjsjJlgrQ7z0gIM.jpg'); background-position:50% 50%; transform:translate(6vw,3vw);}
    #cs3{background:url('http://ekladata.com/KLfEGk2Kfc-ZWSLdWKDDzDs2kTs.jpg'); background-position:50% 50%; transform:translate(11vw,5vw);}
    #cs4{background:url('http://ekladata.com/T9Z7lUI63MEEtUkErIm4lYa7e88.jpg'); background-position:50% 50%; transform:translate(6vw,8vw);}
    #cs5{background:url('http://ekladata.com/T3h0T0ACtBZqhPyYmRQubenApoM.jpg'); background-position:50% 50%; transform:translate(1vw,10vw);}
    #cs6{background:url('http://ekladata.com/3ve9hNCr2IrzljUJ2-d4M2TRS4g.jpg'); background-position:50% 50%; transform:translate(6vw,12vw);}
    #cs7{background:url('http://ekladata.com/1IhdSkOztsj6lLQBp2GvAaWS-jY.jpg'); background-position:50% 50%; transform:translate(11vw,15vw);}
    #cs8{background:url('http://ekladata.com/O5z26xuUR-D8_d2rknFvE1IUdiI.jpg'); background-position:50% 50%; transform:translate(6vw,17vw);}
    #cs9{background:url('http://ekladata.com/KePOh5_ChYwUX8fU4WLuwOqYkXM.jpg'); background-position:50% 50%; transform:translate(1vw,19vw);}
    #cs10{background:url('http://ekladata.com/K2S-1V3xup08GNCFtuxZ8v40kkw.jpg'); background-position:50% 50%; transform:translate(6vw,22vw);}
    #cs11{background:url('http://ekladata.com/rQSjYKKlotUR2NlylqmorpJkXro.jpg'); background-position:50% 50%; transform:translate(11vw,25vw);}
    #cc{position:absolute; z-index:1; width:19vw; height:12vw; transform:translate(20vw,10vw); text-align:center; font-size:1.5vw; background:rgba(255,255,255,0.5);}
    .bt:focus{background:lime;}
    #bt1:focus ~ #cs1,#bt2:focus ~ #cs2,#bt3:focus ~ #cs3,#bt4:focus ~ #cs4,#bt5:focus ~ #cs5,#bt6:focus ~ #cs6,#bt7:focus ~ #cs7,#bt8:focus ~ #cs8,#bt9:focus ~ #cs9,#bt10:focus ~ #cs10,#bt11:focus ~ #cs11{z-index:5; transform:translate(25.5vw,13.25vw);}
    #bt1:focus ~ #cs1:hover,#bt2:focus ~ #cs2:hover,#bt3:focus ~ #cs3:hover,#bt4:focus ~ #cs4:hover,#bt5:focus ~ #cs5:hover,#bt6:focus ~ #cs6:hover,#bt7:focus ~ #cs7:hover,#bt8:focus ~ #cs8:hover,#bt9:focus ~ #cs9:hover,#bt10:focus ~ #cs10:hover,#bt11:focus ~ #cs11:hover{width:19vw; height:33.75vw; border-radius:0%; border:none; transform:translate(20vw,0vw);}

    #bt1:focus ~ #cs1a,#bt2:focus ~ #cs2a,#bt3:focus ~ #cs3a,#bt4:focus ~ #cs4a,#bt5:focus ~ #cs5a,#bt6:focus ~ #cs6a,#bt7:focus ~ #cs7a,#bt8:focus ~ #cs8a,#bt9:focus ~ #cs9a,#bt10:focus ~ #cs10a,#bt11:focus ~ #cs11a{color:white;background-color: black;}
    --></style>


    Les boutons.

    Les images.

    Les citations

    La classe des images.

    Le texte explicatif.

    Le clic sur un bouton anime l'image correspondante.

    Le survol de l'image l'agrandit.

    Le clic sur chaque bouton  fait apparaître la citation.