Art.24B.5.21

Version au clic maintenu.

<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">Clic maintenu</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; text-align:center;font-size:18px; 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:active,#nua2:active,#nua3:active,#nua4:active{z-index:5; width:1000px; height:562px; border-radius:0px; box-shadow:none; transform:translate(0px,0px);}
--></style>