Survolez chaque bouton.
Code de base:
Principe pour 2 bouton/photo: l'ensemble de votre montage doit être placé dans une boîte div à la dimension (hauteur)
<div style="height: 800px;">
<div style="width: 160px; height: 50px; float: left;">
<p id="bt1">Photo 1</p>
<p id="ph1"> </p>
</div>
<div style="width: 160px; height: 50px; float: left;">
<p id="bt2">Photo 2</p>
<p id="ph2"> </p>
</div>... </div>
<style><!--
#bt1{position:relative; z-index:1;transform:translate(0px,0px);width: 150px; height: 35px; border-radius: 15px; border: 1px solid black; background: linear-gradient(to top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); text-align: center; color: white; text-shadow: 1px 1px black; font-size: 20pt;}
#ph1{transition: height 1s linear 0s, transform 1s linear 1s, width 1s linear 1s; width:150px; height:0px; transform: translate(0px,-10px); background:url('https://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/30/DSCN5914.JPG');}
#bt1:hover ~ #ph1{position:relative; z-index:5;transform: translate(0px,-10px); width:1000px; height:563px;}
#bt2{position:relative; z-index:1;transform:translate(0px,0px);width: 150px; height: 35px; border-radius: 15px; border: 1px solid black; background: linear-gradient(to top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); text-align: center; color: white; text-shadow: 1px 1px black; font-size: 20pt;}
#ph2{transition: height 1s linear 0s, transform 1s linear 1s, width 1s linear 1s; width:150px; height:0px; transform: translate(0px,-10px); background:url('https://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/30/DSCN5915.JPG');}
#bt2:hover ~ #ph2{position:relative; z-index:5;transform: translate(-160px,-10px); width:1000px; height:563px;}
--></style>
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
/image%2F0648805%2F20241206%2Fob_edeafc_100659.jpg)
