• Position 2

    La position et la forme de chaque vignette est à votre choix; elle peut être carrée, rectangulaire, ronde ou ovale, inclinée ou non, ombrée ou non, avec ou sans bordure ou ombre, etc, etc...

    On peut les faire se chevaucher au départ et passer au premier plan au survol, selon une animation à personnaliser.

    Survolez chaque vignette.
    Variante avec coloration au survol.

     

     

     

    Code.
    <div id="fd1">
    <p id="m0">Survolez chaque vignette.<br />Variante avec coloration au survol.</p>
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    <p id="m3">&nbsp;</p>
    </div>
    <style><!--
    #fd1{position:relative; margin:10px auto; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/f20.jpg');}
    #m0{position:absolute; width:600px; text-align:center; font-size:18pt; color:green; text-shadow:1px 1px black; transform:translate(100px,20px);}
    #m1{ position:absolute; transition:all 1s linear; transform:translate(50px,250px) rotate(15deg); width:240px; height:180px; filter:grayscale(1); -webkit-filter:grayscale(1); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/15.jpg'); border:2px solid white; box-shadow:3px 3px black;}
    #m2{ position:absolute; transition:all 1s linear; transform:translate(250px,300px) rotate(-10deg); width:280px; height:210px; border-radius:50% filter:grayscale(1); -webkit-filter:grayscale(1); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/87.jpg'); border:2px solid white; box-shadow:3px 3px black;}
    #m3{ position:absolute; transition:all 1s linear; transform:translate(450px,200px) rotate(10deg); width:240px; height:180px; filter:grayscale(1); -webkit-filter:grayscale(1); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/81.jpg'); border:2px solid white; box-shadow:3px 3px black;}
    #m1:hover{transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px solid white; box-shadow:0px 0px black; z-index:2; filter:grayscale(0); -webkit-filter:grayscale(0);}
    #m2:hover{transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border-radius:0%; border:0px solid white; box-shadow:0px 0px black; z-index:2; filter:grayscale(0); -webkit-filter:grayscale(0);}
    #m3:hover{transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px solid white; box-shadow:0px 0px black; z-index:2; filter:grayscale(0); -webkit-filter:grayscale(0);}
    --></style>
    ...
    Vous retrouvez la structure de base, en html, avec 3 images.
    L'image de fond du montage est une texture du net; les positionnements font se chevaucher les vignettes, dont une non rectangulaire.
    Les vignettes sont transformées en noir et blanc par: filter:grayscale(1); -webkit-filter:grayscale(1); deux écritures pour les deux types de navigateurs courants.
    En survol, ce filtre est annulé et passant sa valeur 1 à 0, de même que les décorations (bordure, arrondi, ombre).