Идеи могут быть обезврежены только идеями (O. Бальзак).

Как наложить эффект при наведении курсора на изображение с помощью CSS

2 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
25 октября 2017
Как навести курсор на изображение с помощью CSS
Вы хотите добавить на изображение верхний слой при наведении мыши с помощью CSS? Если да, то следуйте приведенным ниже инструкциям. В этой статье вы узнаете, как создать наложения эффектов на  изображение при наведении курсора мыши. Мы создали накладываемое изображение без использования какого – либо кода JQuery.

Создайте файл с именем index.htmlи добавьте ниже код CSS перед закрытием тега head.

После этого добавьте ниже HTML-код. Пример ниже добавит текстовый эффект потускнения на изображение.

Пример: Скольжение в верхней части

Вот еще один пример с различными эффектами изображения. Добавьте приведенный ниже код CSS в область head вашей HTML страницы.

Теперь добавьте HTML-код ниже, чтобы создать графический эффект скольжения вверху.

Пример: Слайд слева

Добавьте приведенный ниже код CSS, прежде чем закрытием тега head.

Теперь добавьте ниже HTML-код для добавления изображения наложения эффекта cлева.

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Привет мир</div>
  </div>
</div>

 

Просмотров: 103

Если статья понравилась, то поделитесь ей в социальных сетях:

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close