web-dev-qa-db-fra.com

Effet de redimensionnement / zoom avant CSS sur l'image tout en conservant les dimensions

Je voudrais utiliser la transition CSS3 scale() pour un effet de survol, mais je voudrais garder les mêmes dimensions de l'image de survol. Ainsi, l'effet est que l'image effectue un zoom avant, mais elle reste limitée à sa largeur et sa hauteur existantes.

img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

Voici une base violon pour commencer.

Mais encore une fois, je veux que l'image conserve la largeur/hauteur.

Je ne suis pas marié à utiliser l'échelle CSS3. Il y a peut-être une meilleure façon de redimensionner l'élément.

htmlcsscss3rollover
20
mtyson

Vous pouvez réaliser cela simplement en enveloppant l'image par un <div> Et en ajoutant overflow: hidden à cet élément:

<div class="img-wrapper">
    <img src="..." />
</div>

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
}

DEMO DE TRAVAIL.

Il convient également de noter que l'élément <img> (Comme les autres éléments en ligne) se trouve sur son ligne de base par défaut . Et il y aurait un 4~5px Espace au bas de l'image .

Cet écart vertical appartient à l'espace réservé des descendants comme: g j p q y. Vous pouvez résoudre le problème d'alignement en ajoutant la propriété vertical-align à l'image avec une valeur autre que baseline.

De plus, pour une meilleure expérience utilisateur, vous pouvez ajouter transition aux images.

Ainsi, nous nous retrouverons avec ce qui suit:

.img-wrapper img {
    transition: all .2s ease;
    vertical-align: middle;
}

DEMO ACTUALISEE.

42
Hashem Qolami