Art.22.8.21

Pour faire suite à ma page précédente, voici un montage simple; le nombre d'images et leur disposition est à votre convenance.

SURVOL

<div style="width:1000px; height:562px; margin:20px auto; text-align:left; ">
<p id="sv">SURVOL</p>
<img id="br1" class="br" src="http://ekladata.com/a0oTWJskfT6amIZNE5t56piQx7k@1000x562.jpg">
<img id="br2" class="br" src="http://ekladata.com/kTH1vSHN9lHhsTUbcfljq5rtZLI@1000x562.jpg">
<img id="br3" class="br" src="http://ekladata.com/0w9bYT5zsqYXlgXcerLkjz1rocY@1000x562.jpg">
</div>

<style><!--
#sv{position:absolute; z-index:1; width:120px; font-size:20px;}
.br{position:absolute; z-index:1; width:320px; height:180px; border:4px ridge white; transition:all 1s;}
#br1{transform:translate(100px,100px) rotate(20deg);}
#br2{transform:translate(350px,100px) rotate(-20deg);}
#br3{transform:translate(600px,100px) rotate(20deg);}
#br1:hover,#br2:hover,#br3:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px);}
--></style>

Le cadre du montage(1000px par 562px) est sans bordure et sans image de fond mais vous pouvez les ajouter.

Le ratio (rapport largeur/hauteur des images) est 16/9 mais si votre appareil photo prend des photos dans un autre ratio, vous devez modifier les valeurs indiquées (cadre, positionnement).

Vous remarquerez le dimensionnement des images par @1000x562 qui est, à mon avis, la façon la plus simple pour ça.