• Type 5 en 800x600px

    Le principe de ce montage est de faire tourner les vignettes de 45 degrés et de les redresser au survol ... avec un inconvénient qui est qu'une vignette de 300x300px en carré, devient de 425x425px en diagonale; il faut donc en limiter la taille pour que le montage reste dans un format de 800x600px, que j'ai représenté ici par un liseré noir, à supprimer pour votre personnalisation.

    Survoler chaque vignette.

     

     

     

     

     

     

    <div id="a0">
    <p id="a1">Survoler chaque vignette.</p>
    <p id="a2">&nbsp;</p>
    <p id="a3">&nbsp;</p>
    <p id="a4">&nbsp;</p>
    <p id="a5">&nbsp;</p>
    <p id="a6">&nbsp;</p>
    <p id="a7">&nbsp;</p>
    </div>
    <style><!--
    #a0{width:800px; height:600px; border:1px solid black;margin:5px auto;}
    #a1{position:absolute; width:800px; text-align:center; font-size:20pt; color:white; text-shadow:2px 2px black;}
    #a2{position:absolute; z-index:1; width:300px; height:300px; transform:translate(100px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/ZnysRBqiMVI_mn6g9IJKYAhyans.jpg'); transition:all 1s linear;}
    #a3{position:absolute; z-index:2; width:300px; height:300px; transform:translate(160px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/mVUjjXxaw32l6yQrTmEKjb6MP8Y.jpg'); transition:all 1s linear;}
    #a4{position:absolute; z-index:3; width:300px; height:300px; transform:translate(220px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/bytUp2slRWPrHe9NEyq0NNFzQuQ.jpg'); transition:all 1s linear;}
    #a5{position:absolute; z-index:4; width:300px; height:300px; transform:translate(280px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/hNYWM_94Zn5ciQfoVzQfEVbkg0Y.jpg'); transition:all 1s linear;}
    #a6{position:absolute; z-index:5; width:300px; height:300px; transform:translate(340px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/kc7cEyQiVji7l5duuGe65HXQVj8.jpg'); transition:all 1s linear;}
    #a7{position:absolute; z-index:6; width:300px; height:300px;transform:translate(400px,120px) rotate(45deg); box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url('http://ekladata.com/k5K_pDTwZhtLaxrcGpVt-_tiYv0.jpg'); transition:all 1s linear;}
    #a2:hover,#a3:hover,#a4:hover,#a5:hover,#a6:hover, #a7:hover {z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
    --></style>