Партия — это безумие многих ради выгоды единиц (Д. Свифт).

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

2 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды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>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

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

Отправить ответ

Войти с помощью: 
avatar
  Подписаться  
Уведомление о

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

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

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

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

close
galka

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

close