why does my background image cover the container? - html

Question

I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
.about {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("img/sanfrancisco.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
}
.about-img__container {
position: relative;
}
.about-img__container::before {
content: "";
position: absolute;
top: -24px;
top: -1.5rem;
left: -27.2px;
left: -1.7rem;
width: 100%;
height: 100%;
outline: 8px solid #0000ff;
outline: 0.5rem solid #0000ff;
z-index: -1;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.about-img__container:hover:before {
top: 0;
left: 0;
}
.about-banner {
color: #fff;
}
.about-banner-two {
color: #0000ff;
}
<section class="about py-5" id="about">
<div class="container">
<div class="row">
<div class="col-10 mx-auto col-md-6 my-5">
<h1 class="text-capitalize about-banner">
About <strong class="about-banner-two">us</strong>
</h1>
<p class="my-4 text-muted w-75">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
</p>
</div>
<div class="col-10 mx-auto col-md-6 my-5 align-self-center">
<div class="about-img__container">
<img src="img/710-DC.jpg" class="img-fluid" alt="" />
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-12 text-center my-3 text-muted">
<i class="fas fa-truck-moving"></i>
<h6 class="text-uppercase my-3 mission-title">Our Mission</h6>
<p class="w-75 mx-auto text-left mission-text">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center my-3 text-muted">
<i class="fas fa-binoculars"></i>
<h6 class="text-uppercase my-3 mission-title">Our Vision</h6>
<p class="w-75 mx-auto text-center mission-text">I have an image that has a boarder appear from the top left to the center of the image when you scroll over it. I added a background image to the section and it covers that effect. I had that design working fine until I added the background image in the about class tag. I also am using bootstrap so maybe that could be interfering with something??
</p>
</div>
</div>
</div>

Answer 1

Change the z-index of .about-img__container::before pseudo-element. Give it a positive value like 1 or more. This would solve your problem 😅