-
sur les hauteurs
Code de l'article en 60% de votre écran: 60vw/33.75vw au ratio 16/9 pour 6 images "horizontales".
Survol
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: linear-gradient(to bottom, rgba(0,100,0,0.5) 0%, rgba(0,0,100,0.5) 100%);">
<p id="trpz0">Survol</p>
<p id="trpz1" class="tz"> </p>
<p id="trpz2" class="tz"> </p>
<p id="trpz3" class="tz"> </p>
<p id="trpz4" class="tz"> </p>
<p id="trpz5" class="tz"> </p>
<p id="trpz6" class="tz"> </p>
</div>
<style><!--
#trpz0{position:absolute; z-index:1; width:6vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);}
.tz{position:absolute; z-index:1; width:10vw; height:10vw; border:0.4vh ridge white; box-shadow:0.4vh -0.4vh 0.8vh black; transition:all 1s linear;}
#trpz1{box-sizing:border-box; background:url('http://ekladata.com/zvy84eGra6U7R6QjNIfsM67xnDU.jpg'); background-position:0% 0%; background-size:60vw 33.75vw; transform:translate(10vw,4vw) rotate(45deg);}
#trpz2{box-sizing:border-box; background:url('http://ekladata.com/AiFYFP0nFTM_ppPySFI8GXuqBKI.jpg'); background-position:50% 0%; background-size:60vw 33.75vw; transform:translate(24.2vw,4vw) rotate(45deg);}
#trpz3{box-sizing:border-box; background:url('http://ekladata.com/qklh-OrZYrTKdNcz37YKxEJnK1A.jpg'); background-position:100% 0%; background-size:60vw 33.75vw; transform:translate(38.4vw,4vw) rotate(45deg);}
#trpz4{box-sizing:border-box; background:url('http://ekladata.com/kWiccU9D1zkZHtBAiRY6kHYJvEw.jpg'); background-position:0% 100%; background-size:60vw 33.75vw; transform:translate(10vw,18.2vw) rotate(45deg);}
#trpz5{box-sizing:border-box; background:url('http://ekladata.com/ER3B4QazApJXysoUqNP6OpqWfo8.jpg'); background-position:50% 100%; background-size:60vw 33.75vw; transform:translate(24.2vw,18.2vw) rotate(45deg);}
#trpz6{box-sizing:border-box; background:url('http://ekladata.com/EWcH3wgU-jKwvRJx4020gQPBfDE.jpg'); background-position:100% 100%; background-size:60vw 33.75vw; transform:translate(38.4vw,18.2vw) rotate(45deg);}
#trpz1:hover,#trpz2:hover,#trpz3:hover,#trpz4:hover,#trpz5:hover,#trpz6:hover{z-index:5; width:60vw; height:33.75vw; box-sizing:none; border:none; box-shadow:none; transform:translate(0vw,0vw) rotate(0deg);}
--></style>
Le nombre d'images est à votre convenance de même que la couleur de fond, qui peut être une image.