Here is the code snippet I am currently working with.
.imgcol1 {
background-image: url(https://picsum.photos/200/300);
background-repeat: no-repeat;
background-size: cover;
height: 190px;
width: 520px;
}
.col1 {
margin: 75px;
}
.grad {
background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}<div class="row vh-100 mt-5 d-flex justify-content-center">
<div class="col-6 imgcol1 col1 text-white">
<p>California</p>
<h2>Sacramento</h2>
<p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
<div class="row grad">
</div>
</div>
</div>I am trying to achieve a linear gradient effect as depicted in the image.
My initial approach was to create a row within the column and apply the gradient to that row, but it didn't yield the desired results.
If anyone has suggestions on how to properly implement this gradient effect, please share your insights. Thank you!