Увеличение изображения при наведении курсора CSS

Увеличение изображения при наведении курсора посредством CSS, при чем плавно, красиво — задача совсем не сложная.  Такой метод с изображениями используют многие блогеры. Когда посетитель вашего ресурса  наводит курсор на изображение любой записи, это изображение плавно увеличивается. Такой эффект  смотрится очень красиво.

Увеличение изображения при наведении курсора создается при помощи двух свойств CSS, свойства «transition», которое устанавливает эффект перехода между двумя состояниями элемента, и свойства «transform», которое меняет размер элемента.

Как работает эффект — увеличение изображения при наведении курсора, смотрите в демо-примере^

Демо-пример плавного увеличения картинки при наведении курсора

Сейчас рассмотрим как это сделать.

Первым делом размещаем картинку в папке с изображениями (обычно это папка «images»). Далее  вставляем его в необходимое место на странице, предварительно обернув в div с классом img-increase. Укажите правильный путь к вашему изображению.

Html

<div class="img-increase"><img width="800" height="550" src="images/img1.jpg" /></div>

Далее в файле CSS прописываем нашему классу  img-increase необходимые свойства.

CSS

.img-increase {
overflow:hidden;
width: 800px;
height:550px;
}

То есть наш блок будет иметь размеры 800 на 550 пикселей, точно такие-же, как и наше  изображение. Если ваша картинка другого размера, устанавливаете размеры блока соответственно вашему изображению.

Свойство «overflow:hidden;»  необходимо для того, чтобы наше изображение не выходило за рамки блока при увеличении.

Далее прописываем стили css  для самого изображения:

.img-increase img {
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.img-increase img:hover{
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
}

В свойстве «transition» у нас установлено «1s» — это значит, что анимация у нас происходит за 1 секунду. Это значение можно уменьшить или увеличить.

В свойстве «transform» установлено 1.3 —  картинка увеличивается 1.3 раза. Соответственно это значение так-же можно изменить.

Читайте так-же как написать текст поверх картинки в CSS.

На этом все. Если материал понравился, поделитесь им с друзьями, кликнув по кнопкам соц.сетей ниже. Всем Удачи!