Эффект CSS Resize/Zoom-In на изображении при сохранении размеров

Я хотел бы использовать переход CSS3 scale() для эффекта опрокидывания, но я хотел бы сохранить размеры изображений опрокидывания одинаковыми. Таким образом, эффект заключается в том, что изображение масштабируется, но оно остается ограниченным существующей шириной и высотой.

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

Здесь начинается основной fiddle.

Но опять же, я хочу, чтобы изображение сохраняло ширину/высоту.

Я не женат на использовании шкалы css3. Возможно, лучший способ - изменить размер элемента.

Ответы

Ответ 1

Это можно сделать, просто обернув изображение <div> и добавив overflow: hidden к этому элементу:

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

РАБОЧИЙ ДЕМО.

Также стоит отметить, что элемент <img> (как и другие встроенные элементы) находится на baseline по умолчанию. И будет 4~5px пробел внизу изображения.

Этот вертикальный зазор относится к зарезервированному пространству descenders, например: g j p q y. Вы можете исправить проблему выравнивания, добавив свойство vertical-align к изображению со значением, отличным от baseline.

Кроме того, для лучшего удобства пользователя вы можете добавить transition к изображениям.

Таким образом, мы получим следующее:

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

ОБНОВЛЕННЫЙ ДЕМО.