8:00
Автор: Рубрика: CSS-рецепты 2 комментария

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

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

Начальная заготовка

Для нашей статьи я нашел вот такое замечательное изображение:
butterfly
В html я вставил ее следующим образом:

<img src = "butterfly.jpg" class = "butterfly">

К слову, butterfly — это бабочка по-английски. Да, я уже перевел через Google Translate laugh
Отлично, я специально задал картинке стилевой класс, чтобы обртиться к ней в css. Что ж, теперь заготовка у нас есть, можно экспериментировать! Кстати, еще нужно подключить css файл к html. Я думаю, вы знаете, как это делать, а если нет — читайте эту статью.

Я сразу сделаю некоторые манипуляции с картинкой. В частности, сделаю ее блочной и отцентрирую, чтобы было удобнее с ней работать.

.butterfly{
margin: 0 auto;
display: block;
}

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

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

.butterfly:hover{
width: 380px;
}

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

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

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

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

.butterfly{
transition: 0.4s;
}

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

.butterfly:hover{
transform: scale(1.15, 1.15);
}

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

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

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

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

.butterfly:hover{
transform: scaleX(1.2);
}

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

Что ж, на этом у меня пока все. Если у вас остались вопросы, прошу задавать их в комментарии. Мы рассмотрели несколько способов увеличения картинок. На этом я прощаюсь с вами!

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

2 комментария
  • Илья

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

    2017-03-09 в 7:49 | Ответить
  • Максим

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

    2016-12-06 в 7:04 | Ответить