Clip 6

 

survol ici.

Code:

<div style="height: 600px; width: 800px; position: relative; margin: 10px auto; overflow: hidden; border: 1px solid black;">
<p id="fd">&nbsp;</p>
<p id="bt">survol ici.</p>
<p id="cp"><img class="sc" src="http://ekladata.com/s3Bu-TGOzOazMGh_peQxDIAWbQA/94.jpg" alt="" /><img class="sc" src="http://ekladata.com/s3Bu-TGOzOazMGh_peQxDIAWbQA/94.jpg" alt="" /><img class="sc" src="http://ekladata.com/s3Bu-TGOzOazMGh_peQxDIAWbQA/94.jpg" alt="" /><img class="sc" src="http://ekladata.com/s3Bu-TGOzOazMGh_peQxDIAWbQA/94.jpg" alt="" /></p>
</div>

<style><!--
#fd{width:800px; height:600px; position:absolute; background:url('http://ekladata.com/s3Bu-TGOzOazMGh_peQxDIAWbQA/94.jpg'); filter:grayscale(1); -webkit-filter:grayscale(1);}
#bt{position:absolute; z-index:20; transform:translate(700px,0px); width:100px; height:30px; border:1px solid black; background-color:lime; text-align:center; font-size:15pt;}
#cp{position:absolute; width:800px; height:600px; transform:translate(0px,0px);}
#cp img:nth-child(1){position:absolute; clip: rect(0px, 200px, 800px, 0px);transition:all 1s linear; transform-origin:100px 0px; transform: rotate(90deg) translate(-100px,150px) scale(0.5); }
#cp img:nth-child(2){position:absolute; clip: rect(0px, 400px, 800px, 200px);transition:all 1s linear 0.5s; transform-origin:100px 0px; transform: rotate(90deg) translate(-100px,150px) scale(0.5); }
#cp img:nth-child(3){position:absolute; clip: rect(0px, 600px, 800px, 400px);transition:all 1s linear 1s; transform-origin:100px 0px; transform: rotate(90deg) translate(-100px,150px) scale(0.5); }
#cp img:nth-child(4){position:absolute; clip: rect(0px, 800px, 800px, 600px);transition:all 1s linear 1.5s; transform-origin:100px 0px; transform: rotate(90deg) translate(-100px,150px) scale(0.5); }
#bt:hover ~ #cp img.sc{transform:rotate(0deg) translate(0px,0px);}
--></style>
..
Cette écriture, nouvelle pour moi, utilise l'ordre de saisie des images en les identifiant img:nth-child(1),2,3,4 ce qui évite de leur donner un identifiant individuel.

Pour la petit histoire, child (enfant) représente un élément placé dans un parent (<p id="cp">) et ils sont ainsi identifiés par leur ordre de saisie et une sélection (clip) est faite sur chacun d'eux, avec le décalage de la largeur de cette sélection.

L'animation peut-être très variée.