Remise en place 6

Je reprends un de mes codes déjà proposé pour essayer de réaliser un montage avec 2 remises en place, au survol de 2 boutons.

Le code est le double de celui pour une image mais les lignes sont répétitives; image en 800x600px.

<div id="at">
<p id="at0">&nbsp;</p>
<p id="at1" class="a">&nbsp;</p>
<p id="at2" class="a">&nbsp;</p>
<p id="at3" class="a">&nbsp;</p>
<p id="at4" class="a">&nbsp;</p>
<p id="at5" class="a">&nbsp;</p>
<p id="at6" class="a">&nbsp;</p>
<p id="at7" class="a">&nbsp;</p>
<p id="at8" class="a">&nbsp;</p>
<p id="at9" class="a">&nbsp;</p>
<p id="at10" class="a">&nbsp;</p>
<p id="at11" class="a">&nbsp;</p>
<p id="at12" class="a">&nbsp;</p>
<p id="at00">&nbsp;</p>
<p id="at01" class="b">&nbsp;</p>
<p id="at02" class="b">&nbsp;</p>
<p id="at03" class="b">&nbsp;</p>
<p id="at04" class="b">&nbsp;</p>
<p id="at05" class="b">&nbsp;</p>
<p id="at06" class="b">&nbsp;</p>
<p id="at07" class="b">&nbsp;</p>
<p id="at08" class="b">&nbsp;</p>
<p id="at09" class="b">&nbsp;</p>
<p id="at010" class="b">&nbsp;</p>
<p id="at011" class="b">&nbsp;</p>
<p id="at012" class="b">&nbsp;</p>
</div>

<style><!--
#at{position:relative; width:800px; height:600px; background:url(http://ekladata.com/wyXiMzxQPPBsRlu_Q5nhR6FraGg/1348.jpg); border:6px ridge grey; margin:10px auto;}
#at0{position:absolute; z-index:10; transform:translate(750px,0px); width:50px; height:100px; background:lime; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white;}

.a{background:url(http://ekladata.com/vT1k1Z9M-8SV7u_BPqD9MuMfiog/1343.jpg);}
#at1{position:absolute; width:50px; height:100px; background-position:0% 0%; transition:all 2s linear; transform:translate(0px,0px) rotatey(180deg);}
#at2{position:absolute; width:50px; height:100px; background-position:33% 0%; transition:all 2s linear; transform:translate(0px,100px) rotatey(180deg);}
#at3{position:absolute; width:50px; height:100px; background-position:66% 0%; transition:all 2s linear; transform:translate(0px,200px) rotatey(180deg);}
#at4{position:absolute; width:50px; height:100px; background-position:100% 0%; transition:all 2s linear; transform:translate(0px,300px) rotatey(180deg);}
#at5{position:absolute; width:50px; height:100px; background-position:0% 50%; transition:all 2s linear; transform:translate(0px,400px) rotatey(180deg);}
#at6{position:absolute; width:50px; height:100px; background-position:33% 50%; transition:all 2s linear; transform:translate(0px,500px) rotatey(180deg);}
#at7{position:absolute; width:100px; height:50px; background-position:66% 50%; transition:all 2s linear; transform:translate(50px,550px) rotatey(180deg);}
#at8{position:absolute; width:100px; height:50px; background-position:100% 50%; transition:all 2s linear; transform:translate(150px,550px) rotatey(180deg);}
#at9{position:absolute; width:100px; height:50px; background-position:0% 100%; transition:all 2s linear; transform:translate(250px,550px) rotatey(180deg);}
#at10{position:absolute; width:100px; height:50px; background-position:33% 100%; transition:all 2s linear; transform:translate(350px,550px) rotatey(180deg);}
#at11{position:absolute; width:100px; height:50px; background-position:66% 100%; transition:all 2s linear; transform:translate(450px,550px) rotatey(180deg);}
#at12{position:absolute; width:100px; height:50px; background-position:100% 100%; transition:all 2s linear; transform:translate(550px,550px) rotatey(180deg);}

#at0:hover ~ #at1{transform:translate(0px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at2{transform:translate(200px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at3{transform:translate(400px,0px) rotatey(0deg) ; width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at4{transform:translate(600px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at5{transform:translate(0px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at6{transform:translate(200px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at7{transform:translate(400px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at8{transform:translate(600px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at9{transform:translate(0px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at10{transform:translate(200px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at11{transform:translate(400px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at0:hover ~ #at12{transform:translate(600px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}

#at00{position:absolute; z-index:10; transform:translate(750px,100px); width:50px; height:100px; background:yellow; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white;}

.b{background:url(http://ekladata.com/wlTuGSRc9g1PwRsLA0I5kG-lwq8/1347.jpg);}
#at01{position:absolute; width:100px; height:50px; background-position:0% 0%; transition:all 2s linear; transform:translate(50px,0px) rotatey(180deg);}
#at02{position:absolute; width:100px; height:50px; background-position:33% 0%; transition:all 2s linear; transform:translate(150px,0px) rotatey(180deg);}
#at03{position:absolute; width:100px; height:50px; background-position:66% 0%; transition:all 2s linear; transform:translate(250px,0px) rotatey(180deg);}
#at04{position:absolute; width:100px; height:50px; background-position:100% 0%; transition:all 2s linear; transform:translate(350px,0px) rotatey(180deg);}
#at05{position:absolute; width:100px; height:50px; background-position:0% 50%; transition:all 2s linear; transform:translate(450px,0px) rotatey(180deg);}
#at06{position:absolute; width:100px; height:50px; background-position:33% 50%; transition:all 2s linear; transform:translate(550px,0px) rotatey(180deg);}
#at07{position:absolute; width:100px; height:50px; background-position:66% 50%; transition:all 2s linear; transform:translate(650px,0px) rotatey(180deg);}
#at08{position:absolute; width:50px; height:100px; background-position:100% 50%; transition:all 2s linear; transform:translate(750px,200px) rotatey(180deg);}
#at09{position:absolute; width:50px; height:100px; background-position:0% 100%; transition:all 2s linear; transform:translate(750px,300px) rotatey(180deg);}
#at010{position:absolute; width:50px; height:100px; background-position:33% 100%; transition:all 2s linear; transform:translate(750px,400px) rotatey(180deg);}
#at011{position:absolute; width:50px; height:100px; background-position:66% 100%; transition:all 2s linear; transform:translate(750px,500px) rotatey(180deg);}
#at012{position:absolute; width:100px; height:50px; background-position:100% 100%; transition:all 2s linear; transform:translate(650px,550px) rotatey(180deg);}

#at00:hover ~ #at01{transform:translate(0px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at02{transform:translate(200px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at03{transform:translate(400px,0px) rotatey(0deg) ; width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at04{transform:translate(600px,0px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at05{transform:translate(0px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at06{transform:translate(200px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at07{transform:translate(400px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at08{transform:translate(600px,200px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at09{transform:translate(0px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at010{transform:translate(200px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at011{transform:translate(400px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
#at00:hover ~ #at012{transform:translate(600px,400px) rotatey(0deg); width:200px; height:200px; border-radius:0%; z-index:5;}
--></style>