0

I have a background image shown with partial opacity for a <section> element (on the snippet it spreads on everything for some reason, on the browser it limits the image to the section..).

The issue is that the image also covers the inner HTML tags in the section.

I tried to use z-index: -1; on the CSS, but then the image does not show when hovering over the inner HTML tags.

How can it be achieved?

The code

.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>
Yaniv Aflalo
  • 239
  • 2
  • 11
  • 1
    > on the snippet it spreads on everything. You need `position:relative` in card class – Smollet777 Apr 04 '21 at 07:26
  • 1
    You are running into a stacking context problem. but as bg-img is only for styling rather than content you can remove it and instead put the two background images onto before (for the grey) and after (for the sky) pseudo elements on the card, with the after pseudo element having opacity 0.6 on card:hover and both having z-index -1 (or as appropriate) – A Haworth Apr 04 '21 at 09:24
  • Thanks to you both. I prefer to have it on an actual class due to some JavaScript code involved. – Yaniv Aflalo Apr 04 '21 at 17:38

2 Answers2

2

Your question is not very clear but from what I understand you want an image to show in the background of a box when the box is hovered.

First of all, you should remove the hover from the image and set it to it's parent like so:

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

Since, you had the hover on the image itself, z-index on the image was placing the image behind the other inner elements which caused the hover event not to be triggered since you weren't actually hovering on the image.

Put z-index back on the image along with the code I've provided above. It should hopefully solve your problem.

You need position: relative on the section too or else the image will break out of the section and mess the layout.

vio
  • 167
  • 9
  • Sorry if I wasn't clear enough. I meant that the image wouldn't show when hovering over the `

    ` and `

    ` elements inside the `

    ` element with .bg-image class. Your suggestion solved the issue. Thank you!
     – Yaniv Aflalo Apr 04 '21 at 17:44
1

Your question is not clear, are you looking to do this ?

i just added a relative position to card, put tags into a div and add class

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

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

to it.

.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>
AhmadVahedi
  • 57
  • 2
  • 11