Давно что-то я не писал полезных постов об использовании css. Сегодня хочу рассмотреть, как делать в css увеличение картинки. Это можно делать при наведении на нее, а также само увеличение может происходить плавно или резко. И все это можно делать по-разному. Если вам интересна эта тема, предлагаю внимательно прочитать эту статью, и вы узнаете как минимум несколько способов увеличения картинки в css.
Начальная заготовка
Для нашей статьи я нашел вот такое замечательное изображение:
В html я вставил ее следующим образом:
<img src = "butterfly.jpg" class = "butterfly">
К слову, butterfly — это бабочка по-английски. Да, я уже перевел через Google Translate
Отлично, я специально задал картинке стилевой класс, чтобы обртиться к ней в css. Что ж, теперь заготовка у нас есть, можно экспериментировать! Кстати, еще нужно подключить css файл к html. Я думаю, вы знаете, как это делать, а если нет — читайте эту статью.
Я сразу сделаю некоторые манипуляции с картинкой. В частности, сделаю ее блочной и отцентрирую, чтобы было удобнее с ней работать.
.butterfly{
margin: 0 auto;
display: block;
}
Простое резкое увеличение
Чтобы менять внешний вид картинки при наведении на нее, мы будем использовать псевдокласс hover. Подробнее о нем вы можете читать здесь. Способ заключается в том, чтобы просто изменять ширину картинки. При изменении ширины высота также автоматически изменяется. Например, сейчас ширина этого изображения — 320 пикселей. Давайте немного увеличим:
.butterfly:hover{
width: 380px;
}
Заметьте, что увеличивается также и высота, но все это происходит резко. Вы можете также задать и второй параметр — высоту, но тогда можете нарушить пропорции картинки.
Плавное увеличение за счет трансформаций
Теперь мы рассмотрим абсолютно другой способ. Во-первых, изменение размеров будет происходить плавно. Во-вторых, вместо изменения ширины мы воспользуемся трансформациями — это нововведение css3.
Чтобы активировать плавный переход, нужно добавить самой картинке (не картинке по наведению) свойство transition. В нем нужно указать время, за которое должен быть произведен переход. Также можно добавить другие параметры, но на этом я не буду подробно останавливаться сегодня.
.butterfly{
transition: 0.4s;
}
Мы говорим браузеру, что изменения стилей для элемента с классом butterfly должны происходить не резко, а растягиваться по времени на 4 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:
.butterfly:hover{
transform: scale(1.15, 1.15);
}
Увеличение элементов делается с помощью свойства transform и его значения scale(увеличение по горизонтали, по вертикали). Таким образом, если вы хотите пропорционально увеличить изображение, оба значения должны быть одинаковыми. Задавайте значения исходя из того, что 1 — это нормальный размер картинки.
Соответственно, в записи выше мы при наведении увеличиваем картинку на 15% с каждой стороны и это происходит плавно. Вот как это выглядит:
Неплохо, да? Таким образом, для изменения размеров вы можете использовать либо изменение ширины, либо трансформацию. У этих двух способов есть отличия. Если вы изменяете размеры с помощью width, то картинка увеличивается и двигает все содержимое, которое находится возле нее. В случае с трансформациями такого не происходит.
Изменение размера только по одной стороне
Если вам нужно в css увеличить картинку при наведении только по одной стороне, то это также проще всего сделать с помощью трансформаций. Просто напишите так:
.butterfly:hover{
transform: scaleX(1.2);
}
То есть после ключевого слова scale явно указываем координату — X или Y.
Что ж, на этом у меня пока все. Если у вас остались вопросы, прошу задавать их в комментарии. Мы рассмотрели несколько способов увеличения картинок. На этом я прощаюсь с вами!
Спасибо за материал!