• Position à l' agrandissement

     

    Survolez les vignettes.
    Le code d'agrandissement est réalisé en modifiant les valeurs de la largeur et de la hauteur: point de référence, l'angle haut/gauche.
    Le paragraphe texte et les vignettes sont placés en position:absolute; pour que leur animation n'influe pas sur les autres éléments de l'article, tout en restant limité dans le cadre du montage.

    Autre écriture possible, l'agrandissement par un zoom, par transform:scale(2);, qui prend en point de référence le centre de l'image, ce qui la fait sortir du cadre à l'agrandissement, obligeant un positionnement particulier et différent pour chaque image: pas conseillé dans ce cas de figure.
     
     
     
     
    Deux images dans cet exemple mais on peut modifier.
    <div id="fd">
    <div id="cc">Survolez les vignettes.</div>
    <div id="im1">&nbsp;</div>
    <div id="im2">&nbsp;</div>
    </div>
    <style><!--
    #fd{width:1000px; height:563px; border:1px solid black; background:url('http://fonds.toutimages.com/fo_beige/beige054.gif');}
    #cc{ position:absolute; transform:translate(50px,180px); width:900px; height:350px; text-align:center; font-size:11pt;}
    #im1{position:absolute; transition: all 2s linear; width:250px; height:140px; transform:translate(20px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/04/DSCN5113.JPG'); background-size:cover;}
    #im1:hover{transform:translate(0px,0px); z-index:2; width:1000px; height:563px;}
    #im2{position:absolute; transition: all 2s linear; width:250px; height:140px; transform:translate(730px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/04/DSCN5115.JPG'); background-size:cover;}
    #im2:hover{transform:translate(0px,0px); z-index:2; width:1000px; height:563px;}
    --></style>