0

I'm trying to build a "block" on a website that contains a background image with lowered opacity, some text with regular opacity and a button with regular opacity

Currently, I'm getting the background image and text to work, but the button is stuck on the image's opacity (blends in with the background).

Here is the html:

h1,p {
  text-align: center;
  position:relative;
  top:-70px;
  position: relative;
  color: navy;

}


.box1 {
  width: 97.5%;
  background-color: white;
  position: relative;
  padding-top: 200px;
  padding-bottom: 200px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 1.25%;
  margin-left: 1.25%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.box1::before {
  content: "";
  background-image: url(/static/background.jpeg);
  background-size: contain;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  position: absolute;
  opacity: 0.5;
}

.click {
  color:rgba(0, 0, 0, 0.19)
}
<div class="box1">
    <h1>Our Mission</h1>
    <p>THe organization plans to complete tasks x, y, z</p>
    <button class="click">Learn More</button>
</div>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
leaf
  • 19
  • 3

1 Answers1

0

Add position: relative to your .click class.

Side note: You have a duplicate position: relative in your h1, p selector.

CodeBorg
  • 28
  • 3