CODEWITHSUNDEEP
cssbootstrap-4bootstrap-5linear-gradients
a_l_e_x
a_l_e_x

Reputation: 400

How to set the gradient

I have the following code below.

.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 need to create a linear gradient as shown in the figure below.

I thought about adding a row on the column and putting the gradient in this row, it just doesn't work.

Can anyone kindly tell me how to do it?

Upvotes: 1

Views: 222

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34186

I put some comments in the CSS but here I altered the layout slightly and then used a pattern of two columns with the first holding the text and image and the second the one that contains the gradient.

One issue with the transform on the gradient here is that it extends outside of its container - try un-commenting the borders I put in just for a visual to see what is where to see what I mean.

NOTE: This example also includes bootstrap since you had that and it sets the text color to white.

.outer-container {
  /* border: solid 1px lime; */
}

.outer-row {
  /* border: solid 1px blue;*/
}

.image-column {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 100%;
}

.column-text {
  /*  border: solid 1px yellow; */
}

.gradient-column {
  /* force layout - this or &nbsp; in the html */
  border 1px solid transparent;
  background: linear-gradient(to right, rgba(127, 156, 179, 0.9), rgba(245, 245, 245, 0.0));
  /* move this a bit left and up */
  transform: translate(-8%, -115%);
  height: 190px;
  /* force this behind */
  z-index: -999;
  /* border: 1px solid #444488; */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div class="container outer-container">
  <div class="row outer-row">
    <div class=" col-12 mt-5 d-flex ">
      <div class="col col-12 image-column column-text text-white">
        <p>California</p>
        <h2>Sacramento</h2>
        <p>Esplora <i class="fa fa-solid fa-arrow-right"></i></p>
      </div>
    </div>
    <div class="col col-12 gradient-column"></div>
  </div>
</div>

Upvotes: 0

Mar1AK10
Mar1AK10

Reputation: 68

Edited: Actually, if we look closely, the gradient is an overlay, rather than a background, meaning it's on top of the image rather than behind it.

HTML

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 520px;
  /*  filter: drop-shadow(-30px -10px 4px #4444dd); */
}

.col1 {
  margin: 75px;
}

.grad {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}

.myGrad {
  z-index: 999;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(245, 245, 245, 0.0), rgba(245, 245, 245, 0.0));
  transform: translate(-11%, -95%);
}
<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 myGrad">

    </div>
  </div>
</div>

Here's a code pen that works. You can modify the values in the class ".myGrad" to get the box and gradient exactly like you want it.

https://codepen.io/MarwanAK10/pen/JjOVeGM

Upvotes: 2

Related Questions