Эвм - это загрязнитель в его чистейшем проявлении: Ее отходы неотличимы от пищи, которую она производит. (Алан.Дж.Перлис)

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

Добавить в избранное

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

25.10.2017

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

Вы хотите добавить на изображение верхний слой при наведении мыши с помощью CSS? Если да, то следуйте приведенным ниже инструкциям. В этой статье вы узнаете, как создать наложения эффектов на изображение при наведении курсора мыши. Мы создали накладываемое изображение без использования какого – либо кода JQuery.

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

<style>
.container {
  position: relative;
  width: 50%;
}
 
.image {
  display: block;
  width: 100%;
  height: auto;
}
 
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .4s ease;
  background-color: #008CBA;
}
 
.container:hover .overlay {
  opacity: 1;
}
 
.text {
  color: white;
  font-size: 21px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>

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

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

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

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

<style>
.container {
  position: relative;
  width: 50%;
}
 
.image {
  display: block;
  width: 100%;
  height: auto;
}
 
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .4s ease;
}
 
.container:hover .overlay {
  bottom: 0;
  height: 100%;
}
 
.text {
  white-space: nowrap;
  color: white;
  font-size: 21px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>

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

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

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

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

<style>
.container {
  position: relative;
  width: 50%;
}
 
.image {
  display: block;
  width: 100%;
  height: auto;
}
 
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .4s ease;
}
 
.container:hover .overlay {
  width: 100%;
}
 
.text {
  white-space: nowrap;
  color: white;
  font-size: 21px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>

Читать Как добавить Шорткод в WordPress?

Теперь добавьте ниже 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.

Просмотров поста: 22