Плавное увеличение изображения при наведении | RUDEBOXВся суть сайта кроется в его деталях, даже малейшее упущение позволит дать Вашему сайту негативную оценку. В сегодняшнем уроке мы рассмотрим достаточно примитивный эффект, а именно как создать плавное увеличение изображений при наведении курсора мыши, используя только заранее подготовленную картинку, и несколько параметров CSS, суть состоит в том, что изображение заключено в плоскую рамку, но при наведении картинка выдвигается из окантовки, при этом добавлены нами тени образуют эффект парения изображения в воздухе.

 
Такой подход станет отличным дополнением для обычным изображений на сайте, которые необходимо немного выделить, при этом придав им минимального акцента. Давайте посмотрим как все это реализовать.

Шаг 1. HTML

Разметка достаточно примитивна, нам необходимо указать только ссылку на изображение:

Следует отметить, что рамка будет автоматически подстраиваться под необходимую нам картинку.

Плавное увеличение изображения при наведении | RUDEBOX

Шаг 2. CSS

Разметка также не является чем-то гениальным, все очень просто, добавляем рамку с тенями, при этом устанавливаем значения для изображения по умолчанию и на сколько оно будет увеличиваться:

Вот и все. Готово!