Как сделать в css увеличение картинки при наведении на нее?

Сегодня хочу рассмотреть, как делать в css увеличение картинки. Это можно делать, например, при наведении на нее, а также само увеличение может происходить плавно или резко. И все это можно делать по-разному.

Простое резкое увеличение

Чтобы менять внешний вид картинки при наведении на нее, мы будем использовать псевдокласс hover. Способ заключается в том, чтобы просто изменять ширину картинки. При изменении ширины высота также автоматически изменяется. Например, ширина нашего виртуального изображения — 320 пикселей. Давайте немного увеличим:

img:hover{
    width: 380px;
}

При таком подходе увеличивается также и высота, но все это происходит резко. Вы можете также задать и второй параметр — высоту, но тогда можете нарушить пропорции картинки.

Плавное увеличение за счет трансформаций

Теперь мы рассмотрим абсолютно другой способ. Во-первых, изменение размеров будет происходить плавно. Во-вторых, вместо изменения ширины мы воспользуемся трансформациями — это нововведение css3.

Чтобы активировать плавный переход, нужно добавить самой картинке (не картинке по наведению) свойство transition. В нем нужно указать время, за которое должен быть произведен переход. Также можно добавить другие параметры, но на этом я не буду подробно останавливаться сегодня.

img{
    transition: 0.4s;
}

Мы говорим браузеру, что изменения стилей для элементов с тегом img должны происходить не резко, а растягиваться по времени на 4 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:

img:hover{
    transform: scale(1.15, 1.15);
}

Увеличение элементов делается с помощью свойства transform и его значения scale(увеличение по горизонтали, по вертикали). Таким образом, если вы хотите пропорционально увеличить изображение, оба значения должны быть одинаковыми. Задавайте значения исходя из того, что 1 — это нормальный размер картинки.

Соответственно, в записи выше мы при наведении увеличиваем картинку на 15% с каждой стороны и это происходит плавно.

Таким образом, для изменения размеров вы можете использовать либо изменение ширины, либо трансформацию. У этих двух способов есть отличия. Если вы изменяете размеры с помощью width, то картинка увеличивается и двигает все содержимое, которое находится возле нее. В случае с трансформациями такого не происходит.

Изменение размера только по одной стороне

Если вам нужно в css увеличить картинку при наведении только по одной стороне, то это также проще всего сделать с помощью трансформаций. Просто напишите так:

 img:hover{
    transform: scaleX(1.2);
}

То есть после ключевого слова scale явно указываем координату — X или Y.

Понравилась статья? Поделиться с друзьями:
Комментариев: 4
  1. Дмитрий

    Спасибо! Понял как работает :hover.

  2. Илья

    Спасибо за материал!

  3. Максим

    Привет ребят. У меня вот какая проблема. Создаю текст. Вокруг рамку. при увеличении страницы рамка растягивается на всё страницу. Помогите пожалуйста. пишите на Email : stalkermaks99@mail.ru . буду благодарен smile

    1. Aleksandr

      А код-то можно, попробую что-нибудь сделать...

Добавить комментарий