Art.24A.5.21

Première version au survol. 5 images au ratio 16/9.

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: url('http://ekladata.com/wz_OAgvvCkJdHqxJH5g5Lj_meVo.jpg'); background-size: cover;">
<p id="zo">&nbsp;</p>
<p id="z1">Survol</p>
<p id="nua1" class="nua">&nbsp;</p>
<p id="nua2" class="nua">&nbsp;</p>
<p id="nua3" class="nua">&nbsp;</p>
<p id="nua4" class="nua">&nbsp;</p>
</div>
<style><!--
#zo{position:absolute; z-index:1; width:100px; height:562px; background:rgba(0,0,0,0.5); transform:translate(900px,0px);}
#z1{position:absolute; z-index:1; width:100px; font-size:25px; color:white; text-shadow:1px 1px black;  transform:translate(900px,10px);}
.nua{position:absolute; z-index:1; width:80px; height:80px; border-radius:0px 40px 40px 40px; box-shadow:inset 4px -4px 6px black,inset -4px 4px 6px white; transition:all 1s;}
#nua1{background:url('http://ekladata.com/BcSgx1plPuLkSJNkFQn7SuqnYfc.jpg'); background-size:cover; transform:translate(910px,90px) rotate(45deg);}
#nua2{background:url('http://ekladata.com/PK33n-05OqYQNG2lcgDq0tLeXLY.jpg'); background-size:cover; transform:translate(910px,200px) rotate(45deg);}
#nua3{background:url('http://ekladata.com/mlRlOVWMYhRjYXEP3U0oV5SDO1U.jpg'); background-size:cover; transform:translate(910px,310px) rotate(45deg);}
#nua4{background:url('http://ekladata.com/phGYjJVJwE05z31Awap9et4p0w8.jpg'); background-size:cover; transform:translate(910px,420px) rotate(45deg);}
#nua1:hover,#nua2:hover,#nua3:hover,#nua4:hover{z-index:5; width:1000px; height:562px; border-radius:0px; box-shadow:none; transform:translate(0px,0px);}
--></style>