Последние новости:

Поиск по сайту:

Кто от пустяков приходит в восторг, того всякая мелочь может огорчить (Талмуд).

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

FavoriteLoadingДобавить в избранное
25.10.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>

 

Читать  10 основных SEO настроек для новых блогов на Wordpress

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться в соц. сетях:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Это может быть вам интересно

Статьи партнеров:

Рекомендуемое
Мы покажем вам 10 практических примеров команды wget. wget это…
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

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

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

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

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

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

close

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

close