Whenever I hover over an image on my website, a border appears from the top left corner and extends to the center of the image. However, once I added a background image to the section, it seems to cover up that effect. This design was working perfectly until I included the background image in the about class tag. I suspect there may be some interference happening with Bootstrap, which I am also using.
.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">Whenever I hover over an image on my website, a border appears from the top left corner and extends to the center of the image. However, once I added a background image to the section, it seems to cover up that effect. This design was working perfectly until I included the background image in the about class tag. I suspect there may be some interference happening with Bootstrap, which I am...
</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">Whenev...
</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">Whenever I hover over an image on my website, a border appears from the top left corner and extends to the center of the image. However, once I added a background image to the section, it seems to cover up that effect. This design was working perfectly until I included the background image in the about class tag. I suspect there may be some interference happening with Bootstra...
</p>
</div>
</div>
</div>