5 images

J'ai voulu utiliser 5 images et montages (1000x563px), réalisés pour des essais; voici le résultat au clic sur chaque vignette.

Le code à modifier à vos dimensions.
<div id="v1"><input id="v2" type="text" value="X" /> <input id="v3" type="text" /> <input id="v4" type="text" /> <input id="v5" type="text" /><input id="v6" type="text" /> <input id="v7" type="text" /></div>
<style><!--
#v1{position:relative; width:1000px; height:563px; border:1px solid black; margin:10px auto; text-align:left;}
#v2{position:absolute; z-index:50; transform:translate(950px,10px); width:30px; height:30px; background:transparent; font-size:30pt; color:red !important; text-shadow:1px 1px black;}
#v3{position:absolute; z-index:1; transition:all 1s linear; transform:translate(50px,220px) rotate(45deg); width:400px; height:225px; background:url(http://ekladata.com/A0gLKAgiABQpPJlKloLtb9MNZ-c/1026.jpg); background-size:cover;}
#v4{position:absolute; z-index:1; transition:all 1s linear; transform:translate(180px,130px) rotate(65deg); width:400px; height:225px; background:url(http://ekladata.com/1F3pVX0WfaLcB6cY3bi_Ye1JX1Q/1028.jpg); background-size:cover;}
#v5{position:absolute; z-index:1; transition:all 1s linear; transform:translate(300px,100px) rotate(90deg); width:400px; height:225px; background:url(http://ekladata.com/RT6dIeICOTTpzVVCRiWIohcBCLw/1032.jpg); background-size:cover;}
#v6{position:absolute; z-index:1; transition:all 1s linear; transform:translate(420px,130px) rotate(-65deg); width:400px; height:225px; background:url(http://ekladata.com/0wPOtblhyQQ4okg8J5OGlWQxCiQ/1039.jpg); background-size:cover;}
#v7{position:absolute; z-index:1; transition:all 1s linear; transform:translate(550px,220px) rotate(-45deg); width:400px; height:225px; background:url(http://ekladata.com/6knesa_lQ3lqva8jV4Ro169NODs/DSCN1012.jpg); background-size:cover;}
 #v3:focus, #v4:focus,#v5:focus, #v6:focus,#v7:focus{z-index:30; transform:translate(0px,0px) rotate(0deg); width:1000px; height:563px;}
--></style>