Remise en place

J'ai voulu revenir sur un type de montage déjà proposé, sous une forme un peu différente, de morceaux d'image éparses, qui se déplacent pour reconstituer l'image d'origine.

Dans ces codes, j'avais préalablement découpé mon image en morceaux, hébergés avec récupération des adresses; mon idée aujourd'hui, est de n'utiliser que l'adresse de la grande image et de la découper par CSS; il me semble que le poids du montage ne devrait pas être trop lourd puisqu'il n'y a qu'un seule transfert d'image... (?)

Exemple avec image en 800x600px, pour satisfaire la plupart des utilisateurs; on devrait pouvoir fractionner l'image en plus de morceaux; suite avec des essais de forme non rectangulaire ou carrée .

Survolez ce montage.

<div id="rt">
<p id="rt0">&nbsp;</p>
<p id="rt1" class="d">&nbsp;</p>
<p id="rt2" class="d">&nbsp;</p>
<p id="rt3" class="d">&nbsp;</p>
<p id="rt4" class="d">&nbsp;</p>
</div>
<style><!--
#rt{position:relative; width:800px; height:600px; border:6px ridge grey; margin:10px auto;}
#rt0{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
.d{background:url(http://ekladata.com/fBUfCrZBscmzw9ZWUUlzM7Rf-Ew/1167.jpg);}
#rt1{position:absolute; width:400px; height:300px; background-position:top left; transition:all 2s linear; transform:translate(400px,300px);}
#rt2{position:absolute; width:400px; height:300px; background-position:bottom right; transition:all 2s linear; transform:translate(0px,0px);}
#rt3{position:absolute; width:400px; height:300px; background-position:bottom left; transition:all 2s linear; transform:translate(400px,0px);}
#rt4{position:absolute; width:400px; height:300px; background-position:top right; transition:all 2s linear; transform:translate(0px,300px);}
#rt0:hover ~ #rt1{transform:translate(0px,0px);}
#rt0:hover ~ #rt2{transform:translate(400px,300px);}
#rt0:hover ~ #rt3{transform:translate(0px,300px);}
#rt0:hover ~ #rt4{transform:translate(400px,0px);}
--></style>