• Image en fond

    Nous savons placer une image en fond d'un cadre de dimensions quelconques, soit en faisant que l'image remplisse entièrement le cadre, soit que la partie haut/gauche le remplisse.

    Nous pouvons aussi remplir un cadre d'une partie précise d'une image et, à l'agrandissement, l'image s'affichera à partir de cette partie; voyons un exemple: survolez chaque vignette.

     

     


    <div style="width: 80vw; height: 92vh; border: 0.6vh ridge white; margin: 2vh auto; background: linear-gradient(to top, rgba(0,150,0,0.6) 0%, rgba(200,200,0,0.5) 100%);">
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    </div>
    <style><!--
    #ph1{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid white; border-radius:50%; background:url('http://ekladata.com/DZJKXxGhWqvlTkEUTXsGXuuZpaM.jpg'); background-size:80vw 92vh; background-position:50% 50%; transform:translate(10vw,10vh); transition:all 1s linear; box-shadow:0.3vw 0.3vw 0.5vw black;}
    #ph2{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid white; border-radius:50%; background:url('http://ekladata.com/yFzK5_dSs2Jwr1yVNfmLu6TssHs.jpg'); background-size:80vw 92vh; background-position:75% 65%; transform:translate(60vw,10vh); transition:all 1s linear;box-shadow:0.3vw 0.3vw 0.5vw black; }
    #ph1:hover, #ph2:hover{z-index:5; width:80vw; height:92vh; transform:translate(0vw,0vh); border-radius:0%; box-shadow:none; border:none;}
    --></style>


    Chaque vignette, positionnée en indépendant et en arrière plan, mesure 10vw par 10vw, bordure blanche, est arrondie, image de fond, taille de l'image de fond, position de la partie sélectionnée (centre H et V), positionnée, vitesse de l'animation et ombre
    Au survol, le positionnement en profondeur avance,les dimensions changent, la position change, l'arrondi est annulé ainsi que l'ombre et la bordure.
    Vous remarquerez que la partie sélectionnée est différente pour les 2 vignettes (50% 50% et 75% 65%).
    Animation: une seule ligne de code pour les 2 vignettes qui ont la même animation.
    Mes images sont hébergées en 1920x080px et dimensionnées en adaptatif:80vw et 92vh.