Rangement 3

L'article que j'ai publié, selon ce modèle, n'est qu'une variante d'un même principe: découper, par code CSS, une image en différentes parties contigües, les disperser et les remettre en bonne position au survol d'un bouton, invisible ou non.

Cette version donne différentes formes aux vignettes que vous pouvez retrouver sur ma page:

http://pourquoipas732.eklablog.com/transformation-p1070768

Voyons ma proposition de montage, au format 800x600px et animation au survol par bouton invisible, de la dimension du montage.

<div id="fd">&nbsp;
<p id="bt1"><img src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></p>
<p id="s1">&nbsp;</p>
<p id="s2">&nbsp;</p>
<p id="s3">&nbsp;</p>
<p id="s4">&nbsp;</p>
<p id="s5">&nbsp;</p>
<p id="s6">&nbsp;</p>
<p id="s7">&nbsp;</p>
<p id="s8">&nbsp;</p>
</div>

<style type="text/css"><!--
#fd{position:relative; width:800px; height:600px; margin:10px auto; border:4px ridge white; background:url('http://ekladata.com/Sm1oA1ImUvX8ToJjnJtMyXWzQBs/00004.jpg'); }
#s1{transition:all 2s linear 0s; position:absolute; z-index:10; transform:translate(600px,200px); width:150px; height:150px; border-radius:50%; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:0% 0%;}
#s2{transition:all 2s linear 0s; position:absolute; z-index:9; transform:translate(300px,150px) rotate(40deg); width:150px; height:150px; border-radius:0%; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:0% 100%;}
#s3{transition:all 2s linear 0s;position:absolute; z-index:8; transform:translate(100px,150px); width:200px; height:150px; border-radius:50%; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:100% 0%;}
#s4{transition:all 2s linear 0s;position:absolute; z-index:7; transform:translate(50px,50px)rotate(25deg) skew(25deg) ; width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:100% 100%;}
#s5{transition:all 2s linear 0s; position:absolute; z-index:6; transform:translate(400px,300px); width:150px; height:150px; border-radius:50%; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:33.3% 0%;}
#s6{transition:all 2s linear 0s; position:absolute; z-index:5; transform:translate(500px,150px); width:100px; height:200px; border-radius:50%; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:33.3% 100%;}
#s7{transition:all 2s linear 0s;position:absolute; z-index:4; transform:translate(100px,300px)skewX(-25deg); width:200px; height:150px;border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:66.7% 0%;}
#s8{transition:all 2s linear 0s;position:absolute; z-index:3; transform:translate(450px,70px); width:200px; height:100px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/CtA2hcEihhiXkSs5DxdQ_EL642E/6438.jpg'); background-position:66.7% 100%;}

#bt1{position:absolute; z-index:15; width:800px; height:600px; background-size:cover; transform:translate(0px,0px);}

#bt1:hover ~ #s1{transform:translate(0px,-22px); width:200px; height:300px;border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s2{transform:translate(0px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s3{transform:translate(600px,-22px); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s4{transform:translate(600px,278px) rotate(0deg); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s5{transform:translate(200px,-22px); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s6{transform:translate(200px,278px); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s7{transform:translate(400px,-22px); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s8{transform:translate(400px,278px); width:200px; height:300px;width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
--></style>

s1 est en rond, s2 est en carré, s3 est en ovale horizontal, s4 est en losange, s5 est en rond, s6 est en ovale vertical, s7 est en losange rectangulaire, s8 est en rectangle.
Vous pouvez modifier la taille des vignettes (width/height), leur forme, leur position (transform:translate(Y,X);)...
Chaque vignette comporte, en fond, une partie précise de la grande image pour la reconstituer à l'animation.