Hiding overflow on a column with gutters - html

Question

I am trying to set up a grid of thumbnails for blog posts using Bootstrap 4.
The size of the columns are col-md-6. Inside each of the columns is an anchor with a background photo, and a black -> transparent gradient overlay.
It all works fine, however, the gradient overlay is expanding past the width of the container, as you can see from the image below.
Markup:
<div class="container homeSection">
<div class="row">
<div class="col-md-6 dualBlogCallout">
<a href="#">
<div class="img-holder border-radius-15">
<div class="dualGradient"></div>
<img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
</div>
</a>
</div>
<div class="col-md-6 dualBlogCallout">
<a href="#">
<div class="img-holder border-radius-15">
<div class="dualGradient"></div>
<img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
</div>
</a>
</div>
</div>
</div>
CSS:
.dualBlogCallout{
color: white;
position: relative;
width: 100%;
bottom: 0;
left: 0;
z-index: 5;
}
.dualBlogCallout a{
overflow: hidden;
}
.dualGradient{
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
width: 100%;
height: 300px;
pointer-events: none;
z-index: 1;
}
Here is my desired result:
How can I get the absolutely positioned gradient to just remain within anchor with no overflow, and without using bootstrap 4 no-gutter class?

Answer 1

Add a rule in your css:
.img-holder { position: relative; }
I think your issue is that .dualGradient is positioned absolutely, but the nearest parent that has a position set is the .dualBlogCallout.
By default, anything that has position: absolute will traverse up the markup to find the nearest element that has a position explicitly set.

Answer 2

position: relative; is missing on your img-holder class. Here is a solution displaying your code.
Note: I added the border radius class because that was not included in the original post
.img-holder {
position: relative;
}
.dualBlogCallout{
color: white;
position: relative;
width: 100%;
bottom: 0;
left: 0;
z-index: 5;
}
.dualBlogCallout a{
overflow: hidden;
}
.dualGradient{
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
width: 100%;
height: 300px;
pointer-events: none;
z-index: 1;
}
.border-radius-15 {
border-radius: 15px;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container homeSection">
<br><br>
<div class="row">
<div class="col-md-6 dualBlogCallout">
<a href="#">
<div class="img-holder border-radius-15">
<div class="dualGradient"></div>
<img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
</div>
</a>
</div>
<div class="col-md-6 dualBlogCallout">
<a href="#">
<div class="img-holder border-radius-15">
<div class="dualGradient"></div>
<img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
</div>
</a>
</div>
</div>
</div>