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

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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!
<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 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:

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

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

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

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

  2. Максим

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

    1. Aleksandr

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: