Фоновое изображение при наведении, не закрывая внутренние элементы HTML

У меня есть фоновое изображение, показанное с частичной непрозрачностью для элемента <section> (во фрагменте он почему-то распространяется на все, в браузере он ограничивает изображение разделом ..).

Проблема в том, что изображение также покрывает внутренние теги HTML в разделе.

Я попытался использовать z-index: -1; в CSS, но затем изображение не отображается при наведении курсора на внутренние теги HTML.

Как этого добиться?

Код

.card {
  background-image: linear-gradient(to bottom right, white, lightgray);
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  justify-content: center;
  margin: 20px;
  padding: 20px;
  max-width: 80rem;
}

.card:hover {
  animation: glow 1.2s infinite alternate;
}

@keyframes glow {
  from {
    -webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
    box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  }
  to {
    -webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
    -moz-box-shadow: 3px 3px 30px 0px #3d6ded;
    box-shadow: 3px 3px 30px 0px #3d6ded;
  }
}

.bg-image {
  background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  border-radius: 10px;
  opacity: 0;
  transition: ease-in-out 0.6s;
}

.bg-image:hover {
  opacity: 0.6;
}

<!DOCTYPE html>
<html lang = "en">

<body>
  <section class = "card">
    <div class = "bg-image"></div>
    <h2>
      H2 heading
    </h2>
    <p>
      This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
    </p>
  </section>
</body>

</html>

> на сниппете распространяется на все. Вам нужен position:relative в классе карт

— 04.04.2021 10:26

Вы столкнулись с проблемой контекста стекирования. но поскольку bg-img предназначен только для стилизации, а не для содержимого, вы можете удалить его и вместо этого поместить два фоновых изображения на псевдоэлементы до (для серого) и после (для неба) на карточке, причем псевдоэлемент after имеет непрозрачность 0,6 на карте: наведите указатель мыши и оба имеют z-index -1 (или, если необходимо)

— 04.04.2021 12:24

Спасибо вам обоим. Я предпочитаю иметь его в реальном классе из-за задействованного кода JavaScript.

— 04.04.2021 20:38

html css

04.04.2021 10:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Прежде всего, вы должны удалить hover из образа и установить его как родительский элемент следующим образом:

.card:hover .bg-image { 
    opacity: 0.6;
}

Поскольку у вас был hover на самом изображении, z-index на изображении помещал изображение за другими внутренними элементами, из-за чего событие hover не запускалось, поскольку вы на самом деле не наводили курсор на изображение.

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

Вам также нужен position: relative на section, иначе образ вырвется из section и испортит макет.

Извините, если я недостаточно ясно понял. Я имел в виду, что изображение не будет отображаться при наведении курсора на элементы <h2> и <p> внутри элемента <div> с классом .bg-image. Ваше предложение решило проблему. Спасибо!

— 04.04.2021 20:44

04.04.2021 10:46

Ваш вопрос непонятен, вы собираетесь это сделать?

Я просто добавил относительное положение к карте, поместил теги в div и добавил класс

.card-div {
   position: relative;
   z-index: 2;
} 

.card-div:hover + .bg-image {
  opacity: 0.6;
}

к нему.

.card {
  background-image: linear-gradient(to bottom right, white, lightgray);
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  justify-content: center;
  margin: 20px;
  padding: 20px;
  max-width: 80rem;
  position: relative;
}

.card:hover {
  animation: glow 1.2s infinite alternate;
}

@keyframes glow {
  from {
    -webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
    box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
  }
  to {
    -webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
    -moz-box-shadow: 3px 3px 30px 0px #3d6ded;
    box-shadow: 3px 3px 30px 0px #3d6ded;
  }
}

.bg-image {
  background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  border-radius: 10px;
  opacity: 0;
  transition: ease-in-out 0.6s;
  z-index: 1;
}

.bg-image:hover {
  opacity: 0.6;
}

.card-div {
  position: relative;
  z-index: 2;
}  

.card-div:hover + .bg-image {
  opacity: 0.6;
}

<!DOCTYPE html>
<html lang = "en">

<body>
  <section class = "card">
    <div class = "card-div">
      <h2>
        H2 heading
      </h2>
      <p>
        This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
      </p>
    </div>
    <div class = "bg-image"></div>
  </section>
</body>

</html>

Спасибо! Я предпочел оставить HTML как есть из-за задействованного кода JavaScript.

— 04.04.2021 20:45

04.04.2021 10:53