Art.24C.5.21

Version au clic. Vignettes et X dans des éléments cliquables (input).

<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</p>
<input id="z2" type="text" value="X" /><input id="nua1" class="nua" type="text" /> <input id="nua2" class="nua" type="text" /> <input id="nua3" class="nua" type="text" /> <input id="nua4" class="nua" type="text" /></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:25px; color:white; text-shadow:1px 1px black; transform:translate(900px,520px);}
#z2{position:absolute; z-index:20; width:30px; text-align:center;border:none; background:white; transform:translate(960px,10px); font-size:30px; color:red!important;}
.nua{position:absolute; z-index:1; width:80px; height:80px; border:none; 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:focus,#nua2:focus,#nua3:focus,#nua4:focus{z-index:5; width:1000px; height:562px; border-radius:0px; box-shadow:none; transform:translate(0px,0px);}
--></style>