/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
/image%2F0648805%2F20241206%2Fob_edeafc_100659.jpg)
pourquoipas732
En prenant comme base, le code précédent, nous pouvons le modifier pour:
_ qu'il présente plus d'images,
_ que ces images s'agrandissent à partir de leur centre et non à partir de leur angle haut/gauche (par défaut),
_ que le montage n'ait pas de couleur de fond mais soit transparent sur votre page,
_ que le montage n'ait pas de bordure; dans mon exemple, j'ai laissé la bordure en pointillé, pour visualiser les dimensions mais supprimez border:0.2vh dashed black;
Survolez chaque partie visible des éléments.
<div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.2vh dashed black;">
<p id="ph1"> </p>
<p id="ph2"> </p>
<p id="ph3"> </p>
<p id="ph4"> </p>
<p id="ph5"> </p>
<p id="ph6"> </p>
<p id="ph7"> </p>
<p id="ph8"> </p>
<p id="ph9">Survolez chaque partie visible des éléments.</p>
</div>
<style><!--
#ph1{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/XEt1xXqcZXURnRrKJlnnZGlw0lE.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(17vw,10vh) rotate(45deg); transition:all 1s linear;}
#ph2{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/jUPQEasRua88Ptw1hQKFjm1OUhc.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(9.8vw,24.8vh) rotate(45deg);transition:all 1s linear;}
#ph3{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/NKrzKcA0HZqkQjcGGu8ErA1ByLk.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(24.2vw,24.8vh) rotate(45deg); transition:all 1s linear;}
#ph4{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/0Br_HTn6nNSXU984fLaIEn4A0rg.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(17vw,39.5vh) rotate(45deg); transition:all 1s linear;}
#ph5{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/Ox33jMYLde3-HLsJsZXrk7tEGoo.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(31.4vw,10vh) rotate(45deg); transition:all 1s linear;}
#ph6{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/8gsWco12YbX3Eii1LipdfufY9SI.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(31.4vw,39.5vh) rotate(45deg); transition:all 1s linear;}
#ph7{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('https://ekladata.com/dWRvdM8rqpB0G3NEUJmTUYcn9bo.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(38.6vw,24.8vh) rotate(45deg); transition:all 1s linear;}
#ph8{position:absolute; z-index:1; width:28.5vw; height:14vw; border:0.3vh solid black; background:url('https://ekladata.com/AakzuVqWt3aalhpJnmvmTLwM4eQ.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(15vw,20.7vh); transition:all 1s linear;}
#ph9{position:absolute; z-index:1; width:40vw; transform:translate(10vw,0vh);text-align:center; font-size:3vh; color:white; text-shadow:0.2vh 0.2vh black; transition:all 1s linear;}
#ph1:hover, #ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover,#ph6:hover,#ph7:hover,#ph8:hover{z-index:10; width:60vw; height:69vh; border:0.6vh ridge black; transform:translate(0vw,0vh);}
--></style>
Remplaçez mes adresses-images, au rapport 16/9, en rouge dans le code, par les vôtres, qu'elles que soient leurs dimensions.
