Ne publiant plus d'article, je me rends compte que je perds l'écriture des codes alors, un petit exercice pour vérifier si je sais encore faire !
Par cette période de fortes chaleurs, il m'est agréable de penser à un voyage en Norvège, l'été !
J'y suis retourné en hiver, espérant voir des aurores boréales mais un voyageur atteint du covid a modifié notre programme !
Mon idée de montage est de présenter des images horizontales et verticales au survol de boutons.
Dans cet exemple, j'ai placé des images du net, 5 horizontales et 6 verticales; vous pouvez, bien sûr, adapter le principe à vos besoins.
Le code:
<div style="background: radial-gradient(rgb(243, 226, 199) 0%, rgb(193, 158, 103) 50%, rgb(182, 141, 76) 51%, rgb(233, 212, 179) 100%); border: 4px solid grey; height: 730px; margin: 50px 0px 50px -25px; width: 1200px;">
<p id="bt0">SURVOL</p>
<p class="bt" id="bt1"> </p>
<p class="bt" id="bt2"> </p>
<p class="bt" id="bt3"> </p>
<p class="bt" id="bt4"> </p>
<p class="bt" id="bt5"> </p>
<p class="bt" id="bt6"> </p>
<p class="bt" id="bt7"> </p>
<p class="bt" id="bt8"> </p>
<p class="mgh" id="mgh1"><img src="https://i.goopics.net/r8inke.jpg" /></p>
<p class="mgh" id="mgh2"><img src="https://i.goopics.net/u8of9k.jpg" /></p>
<p class="mgh" id="mgh3"><img src="https://i.goopics.net/2y8q4w.jpg" /></p>
<p class="mgh" id="mgh4"><img src="https://i.goopics.net/nq7cwh.jpg" /></p>
<p class="mgh" id="mgh5"><img src="https://i.goopics.net/jd6ndd.jpg" /></p>
<p class="mgh" id="mgv1"><img src="https://i.goopics.net/nxk1qd.jpg" /></p>
<p class="mgh" id="mgv2"><img src="https://i.goopics.net/xa3l37.jpg" /><img src="https://i.goopics.net/1jgvcx.jpg" /></p>
<p class="mgh" id="mgv3"><img src="https://i.goopics.net/fbhdlp.jpg" /><img src="https://i.goopics.net/2ryg8c.jpg" /><img src="https://i.goopics.net/d5yh9g.jpg" /></p>
</div>
<style><!--
#bt0{position:absolute; z-index:1; width:200px; text-align:center; font-size:40px; color:brown; transform:translate(500px,300px);}
.bt{position:absolute; z-index:1; width:30px; height:30px; border-radius:50%; background:red; border:1px solid black;}
.bt:hover{background:green;}
#bt1{transform:translate(100px,675px);}
#bt2{transform:translate(200px,675px);}
#bt3{transform:translate(300px,675px);}
#bt4{transform:translate(400px,675px);}
#bt5{transform:translate(500px,675px);}
#bt6{transform:translate(600px,675px);}
#bt7{transform:translate(700px,675px);}
#bt8{transform:translate(800px,675px);}
.mgh{position:absolute; z-index:3; width:1200px; height:675px; text-align:center; transform:rotatey(90deg); margin-top:0px; transition:all 1s;}
#bt1:hover~#mgh1,#bt3:hover~#mgh2,#bt5:hover~#mgh3,#bt7:hover~#mgh4,#bt8:hover~#mgh5{transform:rotatey(0deg);}
#bt2:hover~#mgv1,#bt4:hover~#mgv2,#bt6:hover~#mgv3{transform:rotatey(0deg);}
--></style>
SURVOL
