• Position 3

    Vous avez remarqué que l'image de fond des vignettes ne reprend, par défaut que la partie haut/gauche de la grande image; nous pouvons souhaiter voir la vignette en intégralité réduite.

    Dans ce cas, nous allons ajouter un attribut: background-size:cover; (taille du fond: couvrir), qui va remplir la vignette avec la grande image, quitte à la déformer, si le rapport largeur/hauteur est différent ... ce qui n'est pas le cas dans mon exemple: rapport 4/3 pour 800x600px et  240x180px.

    Survolez chaque vignette.
    Vignettes "totales".

     

     

     

    <div id="fd">
    <p id="m0">Survolez chaque vignette.<br />Vignettes "totales".</p>
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    <p id="m3">&nbsp;</p>
    </div>
    <style><!--
    #fd{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/brown94.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; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/17.jpg'); background-size:cover; 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/09.jpg'); background-size:cover; 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; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/88.jpg'); background-size:cover; 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;}
    #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; }
    --></style>
    ..
    J'espère que ces différents exemples vous seront utiles.
    Vous pourrez retenir l'écriture minimale en html et l'ensemble des paramètres (attributs) placés en CSS ce qui est très pratique, dans ce genre d'articles qui se suivent avec peu de différences, différences qui sont juste à écrire en CSS.