attribute - img html

Efecto de cambio de tamaño/ampliación de CSS en la imagen manteniendo las dimensiones

Question

Me gustaría usar la transición a scale() CSS3 scale() para un efecto de rollover, pero me gustaría mantener las dimensiones de la imagen de rollover iguales. Entonces, el efecto es que la imagen se acerca, pero permanece restringida a su anchura y altura existentes.

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 */
}

Aquí hay un fiddle básico para empezar.

Pero una vez más, quiero que la imagen mantenga el ancho / alto.

No estoy casada para usar la escala css3. Tal vez hay una mejor manera de cambiar el tamaño del elemento.

Answer 1

Podría lograrlo simplemente envolviendo la imagen con un <div> y agregando overflow: hidden a ese elemento:

<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 TRABAJO .

También vale la pena señalar que el elemento <img> (como los otros elementos en línea) se encuentra en su baseline de forma predeterminada. Y habría un espacio de 4~5px en la parte inferior de la imagen .

Esa brecha vertical pertenece al espacio reservado de los descendientes como: gjpq y. Podría solucionar el problema de alineación agregando vertical-align propiedad vertical-align a la imagen con un valor diferente a la baseline de baseline .

Además, para una mejor experiencia de usuario, puede agregar transition a las imágenes.

Así terminaremos con lo siguiente:

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

DEMO ACTUALIZADA .