Le printemps est là !

Pour montrer que les formes et positions des sélections, voici encore un "dé" que vous modifierez en survolant les numéros.

Le cadre du montage en 800x600px n'est là que pour faire apparaître les dimensions du montage mais vous pouvez le supprimer.

<div id="zz">
<p id="z0">1</p>
<p id="z1" class="z">&nbsp;</p>
<p id="z2" class="z">&nbsp;</p>
<p id="z3" class="z">&nbsp;</p>
<p id="y0">2</p>
<p id="y1" class="y">&nbsp;</p>
<p id="y2" class="y">&nbsp;</p>
<p id="y3" class="y">&nbsp;</p>
</div>
<style><!--
#zz{position:relative; width:800px; height:600px; border:1px solid black; margin:5px auto;}
#z0{position:absolute; z-index:10; width:50px; height:50px; border-radius:50%; text-align:center; font-size:40pt; transform:translate(200px,0px); color:white; text-shadow:1px 1px black;}
.z{background:url(http://ekladata.com/hxAHUxInH0x7Kf0kK3P6tAfar9g.jpg);}
#z1{position:absolute; z-index:1; transform:translate(0px,100px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#z2{position:absolute; z-index:1; transform:translate(300px,100px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#z3{position:absolute; z-index:1; transform:translate(600px,100px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#z0:hover ~ #z1{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#z0:hover ~ #z2{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#z0:hover ~ #z3{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#y0{position:absolute; z-index:10; width:50px; height:50px; border-radius:50%; text-align:center; font-size:40pt; transform:translate(500px,0px); color:white; text-shadow:1px 1px black;}
.y{background:url(http://ekladata.com/hNu1zWnf1J1e2bRVeciUUmLUKyk.jpg);}
#y1{position:absolute; z-index:1; transform:translate(0px,300px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#y2{position:absolute; z-index:1; transform:translate(300px,300px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#y3{position:absolute; z-index:1; transform:translate(600px,300px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#y0:hover ~ #y1{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#y0:hover ~ #y2{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#y0:hover ~ #y3{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
--></style>