How to set the gradient-CodePudding

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 >
  <div >
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i ></i></p>
    <div >

    </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?

CodePudding user response：

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 >
  <div >
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i ></i></p>
    <div >

    </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

CodePudding user response：

I code-reviewed like that and update.

.container {
  position: relative;
}

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: 200px;
}
.imgcol1 p{
  margin:0;
}

.imgcol1:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  z-index: -1;
  top: -20px;
  left: -20px;
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7));
}

<div >
  <div >
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i ></i></p>
  </div>
</div>