• Zoom

    Nous avons plusieurs façons d'agrandir une image au survol, sans la faire remplir notre écran: en voici deux façons simples mais il y en a d'autres...

    - la première est de placer notre image en fond de cadre et d'en modifier la taille au survol, en choisissant le centre de l'agrandissement.

    - la seconde est de placer notre image dans un cadre qui n'affichera pas ce qui en dépassera; ainsi, le survol fera s'agrandir l'image mais le cadre n'en affichera qu'une partie, à choisir.

    Ce code est à écrire en fenêtre code source (<>); les valeurs de mes exemples sont à adapter à vos pages de blog.

     

    <p id="el">&nbsp;</p>
    <style><!--
    #el{width:1200px; height:675px; margin:0px auto; background:url('http://ekladata.com/3u9EpYB8dovIIb7OKXvpsT-0CWY.jpg'); background-size:100%; background-position:50% 50%; transition:all 3s linear;}
    #el:hover{background-size:300%; background-position:25% 25%;}
    --></style>

    Le cadre vide, contenant l'image en fond est nommé id="el"; ses dimensions sont déterminées en ligne CSS (largeur, hauteur, positionnement dans la page); l'image est placée en fond (background:url();), en taille 100%; son point de référence pour l'animation est son centre: background-position:50% 50%; cela ne modifie pas l'affichage au départ mais comme cette valeur va être modifiée au survol, il est préférable de la préciser pour une animation régulière; la vitesse de l'animation est définie.

    Au survol, on modifie la taille de l'image de fond (300%) et son point de référence, pour agrandir sur un endroit précis: background-position:25% 25%;

    <p id="el2"><img id="el3" src="http://ekladata.com/hLUDzatjNRQyKCD6pF11IwIcK0E.jpg" alt="" /></p>
    <style><!--
    #el2{width:1200px; height:675px; margin:0px auto; overflow:hidden; border:4px solid grey;}
    #el3{width:1200px; height:675px; transition:all 2s linear;}
    #el3:hover{width:3600px; height:2025px;transform:translate(-1000px,-500px);}
    --></style>

    Les dimensions du cadre (id="el2) et son positionnement dans la page sont définis en lignes CSS (entre <style><!-- et --></style>); ce qui en déborde est caché par: overflow:hidden;  (littéralement: dépassement caché)

    L'image identifiée (id="el3) est définie en taille et en vitesse d'animation; au survol (hover), on modifie sa taille et on définit quelle sera la partie qui en sera affichée par un déplacement horizontal et vertical : transform:translate(-1000px,-500px); (X,Y)