• Descriptif 60/33.75

    Voici le montage publié en 80vw/45vw en taille 60vw/33.75vw.

    Une aimable visiteuse m'a signalé qu'un lien, placé dans un descriptif, n'ouvre pas la page demandée mais ramène au départ.

    Clic

    Survol

    En cliquant sur un bouton de gauche, vous changez l'image de fond.
    En survolant cette image, vous faites apparaître un commentaire.

    Ce montage est inspiré par l'intérêt d'un petit randonneur pour les commentaires au survol d'images.

    La taille et le nombre d'images/commentaires sont à votre convenance.

     

     

     

     

     

    Descriptif 1

    Descriptif 2

    Descriptif 3

    Descriptif 4

    Descriptif 5


    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/R9x3hqyfBsASQRkEZLq9V1x0IoY.jpg'); background-size: cover;"><input id="g1" class="gr" type="text" value="1" /><input id="g2" class="gr" type="text" value="2" /><input id="g3" class="gr" type="text" value="3" /><input id="g4" class="gr" type="text" value="4" /><input id="g5" class="gr" type="text" value="5" />
    <p id="cl">Clic</p>
    <p id="surv">Survol</p>
    <p id="coul0">En cliquant sur un bouton de gauche, vous changez l'image de fond.<br />En survolant cette image, vous faites appara&icirc;tre un commentaire.<br /><br />Ce montage est inspir&eacute; par l'int&eacute;r&ecirc;t d'un petit randonneur pour les commentaires au survol d'images.<br /><br />La taille et le nombre d'images/commentaires sont &agrave; votre convenance.</p>
    <p id="nb1">&nbsp;</p>
    <p id="nb2">&nbsp;</p>
    <p id="nb3">&nbsp;</p>
    <p id="nb4">&nbsp;</p>
    <p id="nb5">&nbsp;</p>
    <p id="coul1">Descriptif 1</p>
    <p id="coul2">Descriptif 2</p>
    <p id="coul3">Descriptif 3</p>
    <p id="coul4">Descriptif 4</p>
    <p id="coul5">Descriptif 5</p>
    </div>

    <style><!--
    .gr{position:absolute; z-index:10; font-size:2vw; color:white!important; text-align:center; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);}
    #g1{width:2vw; transform:translate(0vw,5vw);}
    #g2{width:2vw; transform:translate(0vw,8vw);}
    #g3{width:2vw; transform:translate(0vw,11vw);}
    #g4{width:2vw; transform:translate(0vw,14vw);}
    #g5{width:2vw; transform:translate(0vw,17vw);}
    #cl{position:absolute; z-index:10; width:4vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(0vw,0vw);}
    #surv{position:absolute; z-index:10; width:7vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(53vw,0vw);}

    #nb1{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/ulbAygrJgThcIOyGPGoM9CxnlpE.jpg'); background-size:cover; opacity:0;}
    #nb2{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/LbUJWC1M1s3RE7quMt3ZVVyCG9o.jpg'); background-size:cover; opacity:0;}
    #nb3{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/MI-JfDo7EPaxXEai5d-Ugaot0Rc.jpg'); background-size:cover; opacity:0;}
    #nb4{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/P6cF24Q-MmbkPqlDZHbZw18uooY.jpg'); background-size:cover; opacity:0;}
    #nb5{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/9fiTgq_c0BxKRMJXuQ03RxNMZxE.jpg'); background-size:cover; opacity:0;}
    #coul0{position:absolute; z-index:1; width:40vw; height:20vw; transform:translate(10vw,6.75vw);background:rgba(255,255,255,0.5); text-align:center; font-size:1.5vw; line-height:1.5vw; }
    #coul1{position:absolute; z-index:1; box-sizing:border-box; padding:10vw; width:60vw; height:33.75vw; background:rgba(255,255,255,0.5); text-align:center; font-size:2vw; line-height:2vw; opacity:0; transition:all 0.2s linear;}
    #coul2{position:absolute; z-index:1; box-sizing:border-box; padding:10vw; width:60vw; height:33.75vw; background:rgba(255,255,255,0.5); text-align:center; font-size:2vw; line-height:2vw; opacity:0; transition:all 0.2s linear;}
    #coul3{position:absolute; z-index:1; box-sizing:border-box; padding:10vw; width:60vw; height:33.75vw; background:rgba(255,255,255,0.5); text-align:center; font-size:2vw; line-height:2vw; opacity:0; transition:all 0.2s linear;}
    #coul4{position:absolute; z-index:1; box-sizing:border-box; padding:10vw; width:60vw; height:33.75vw; background:rgba(255,255,255,0.5); text-align:center; font-size:2vw; line-height:2vw; opacity:0; transition:all 0.2s linear;}
    #coul5{position:absolute; z-index:1; box-sizing:border-box; padding:10vw; width:60vw; height:33.75vw; background:rgba(255,255,255,0.5); text-align:center; font-size:2vw; line-height:2vw; opacity:0; transition:all 0.2s linear;}

    #g1:focus ~ #nb1,#g2:focus ~ #nb2,#g3:focus ~ #nb3,#g4:focus ~ #nb4,#g5:focus ~ #nb5{z-index:3;opacity:1;}
    #g1:focus ~ #coul1,#g2:focus ~ #coul2,#g3:focus ~ #coul3,#g4:focus ~ #coul4,#g5:focus ~ #coul5{z-index:8;}
    #coul1:hover,#coul2:hover,#coul3:hover,#coul4:hover,#coul5:hover{opacity:1;}
    --></style>


    Mauve: boutons visibles de changement d'image de fond.

    Gris: indications.

    Beige: Descriptifs qui sont placés sous les images de fond et qui passent dessus au survol des boutons invisibles qui sont, en premier plan (z-index:10;)

    Jaune: Images de fond invisibles qui deviennent opaques au clic sur chaque bouton mauve.