Блог

Главная - Вопросы по программированию - Некорректно работает фоновое увеличение и уменьшение масштаба при наведении курсора мыши

Некорректно работает фоновое увеличение и уменьшение масштаба при наведении курсора мыши

#html #css

#HTML #css

Вопрос:

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

 .container {
  overflow: hidden;
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.5;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image:hover {
  transform: scale(1.5);
  transition: .5s ease;
}  
 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h2>Slide in Overlay from the Bottom</h2>
  <p>Hover over the image to see the effect.</p>
  <div class="container">
    <img src="https://www.activeconnections.org/wp-content/uploads/avatar-1.png" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</body>

</html>

На самом деле я хочу добавить к изображению эффект наведения курсора мыши, который при наведении курсора мыши на изображение плавно увеличивает масштаб, а при наведении курсора мыши на изображение уменьшает масштаб.

Ответ №1:

Насколько я понимаю, вы хотите, чтобы увеличение происходило при наведении курсора мыши на карту, а уменьшение — как только мышь отойдет от карты. Если это так, приведенный ниже фрагмент должен быть исправлением этой проблемы:

 .container {
  overflow: hidden;
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.5;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  transform: scale(1.5);
  transition: .5s ease;
}  
 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h2>Slide in Overlay from the Bottom</h2>
  <p>Hover over the image to see the effect.</p>
  <div class="container">
    <img src="https://www.activeconnections.org/wp-content/uploads/avatar-1.png" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</body>

</html>

Проблема заключалась в том, что вы отреагировали на :hover из .image , и поскольку было наложение, как только наложение заслонило изображение, движок css удаляет :hover из изображения. Изменение целевого объекта :hover на .container гарантирует, что он будет присутствовать, даже если наложение затемняет изображение.

Ответ №2:

Оно уменьшается, когда наложение достигает вашего указателя. Когда наложение достигает вашего указателя, на самом деле эффект наведения получает наложение, а не изображение.

Вы можете избежать этого, добавив .pointer-events: none в свой .container:hover .overlay css, вот так:

 .container:hover .overlay {
  height: 100%;
  pointer-events: none;
}