Clip 13

Amusement, toujours sur le même principe

<div style="position: relative; width: 800px; height: 600px; margin: 10px auto; border: 4px ridge white; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/patt2.jpg');">
<p id="fdb">&nbsp;</p>
<p id="bt1">1</p>
<p id="bt2">2</p>

<p id="ens"><img class="a" src="http://ekladata.com/K3Gdq6ZMlG4hc1DiV3IoIM_ugzo/5969.jpg" alt="" /><img class="b" src="http://ekladata.com/6da-sw0wKN1WKyf6qMYeaA66_0M/5970.jpg" alt="" />p>
</div>
<style><!--
#fdb{position:absolute; z-index:8; width:40px; height:250px; transform:translate(750px,0px);background-color:rgba(128,128,128,0.5);}
#bt1{position:absolute; z-index:10; width:30px; height:30px;transform:translate(753px,5px); border:1px solid white; box-shadow:1px 1px black; text-align:center; font-size:15pt;}
#bt2{position:absolute; z-index:10; width:30px; height:30px;transform:translate(753px,45px); border:1px solid white; box-shadow:1px 1px black; text-align:center; font-size:15pt;}

#ens img:nth-child(1) { position:absolute; z-index:1; transition:all 1s linear; clip:rect(20px,300px,300px,20px);}
#ens img:nth-child(2) { position:absolute; z-index:1; transition:all 1s linear; clip:rect(350px,250px,550px,50px);}

#bt1:hover ~ #ens img.a{clip:rect(0px 800px 600px 0px); z-index:5; transform:translate(0px,0px)}
#bt2:hover ~ #ens img.b{clip:rect(0px 800px 600px 0px); z-index:5; transform:translate(0px,0px);}

--></style>

La principale "finesse" de ce code clip, est de dimensionner la sélection, par les différentes valeurs.
Vous remarquerez que chaque bouton, identifié en id="btx" commande une image, du paragraphe identifié en id="ens", et elle-même identifiée en class="a/b/c".
Un rappel: pour donner un attribut à un élément identifié en class, il faut faire précéder l'identifiant par un point alors qu'un élément identifié en id, doit être précédé par un dièse #.