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

Опубликовано: 23.07.2020 в категории: HTML/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.

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

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

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

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×