Pêle Mêle

Un rappel pour un montage simple de 6 photos en vrac, à agrandir au survol.

Mon exemple ne comporte que des images "horizontales", en 800px par 450px (ratio 16/9) mais vous pouvez placer des images verticales ou d'un autre ratio en modifiant en conséquence le code.

<div style="position: relative; margin: 30px auto; width: 800px; height: 450px; text-align: left;"><img id="jda" class="jd" src="http://ekladata.com/sH11wjZPA6iEASuxJR0lHJbEBXg.jpg" alt="" /> <img id="jdb" class="jd" src="http://ekladata.com/usNA38drotoo4-xfpHEUBNUuiqk.jpg" alt="" /> <img id="jdc" class="jd" src="http://ekladata.com/j9Pu5JIGsk6mVFyCnpxTVFVKlFs.jpg" alt="" /> <img id="jdd" class="jd" src="http://ekladata.com/adAuLUCxaYQEL6Pe9lKLu0NZ7o0.jpg" alt="" /> <img id="jde" class="jd" src="http://ekladata.com/aF1fb4G8_91rfk1u386sXw7dRL0.jpg" alt="" /> <img id="jdf" class="jd" src="http://ekladata.com/nw9Y1jFeJrQrQyJ4NjJ3v9YTaXs.jpg" alt="" /></div>
<style><!--
.jd{position:absolute; z-index:1; width:240px; height:135px; border:4px solid white; transition:all 1s;}
#jda{transform:translate(50px,100px) rotate(30deg);}
#jdb{transform:translate(200px,80px) rotate(10deg);}
#jdc{transform:translate(350px,100px) rotate(-45deg);}
#jdd{transform:translate(480px,120px) rotate(0deg);}
#jde{transform:translate(130px,230px) rotate(-20deg);}
#jdf{transform:translate(400px,250px) rotate(20deg);}
#jda:hover,#jdb:hover,#jdc:hover,#jdd:hover,#jde:hover,#jdf:hover{z-index:5; width:800px; height:450px; transform:translate(0px,0px) rotate(0deg);}
--></style>