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.

<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.