Linear Gradient (black) from top to bottom on image with Text on foreground (bottom-left)

user_7184572 0
Viewed 72

The linear gradient works with the image but the texts does not appear on the image foreground. Also the gradient should not be on the texts. Where did I go wrong?

Any help will be much appreciated.

.glimage {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  background-image: url(/assets/img/rests/bangkok.jpg);
  height: 220px;
}

.glimage:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/assets/img/rests/scenery.jpg);
}
.gltext {
  position:absolute;
  color: #fff;
}
<div class="box">
  <div class="glimage">
    <div class="gltext">
      <h2>Travelling</h2> 
<p>These are texts.</p></div>
</div></div>

css html
2 Answers

You're missing your z-index. A high z-index will "pull it closer" to you.

.glimage {
  z-index: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  background-image: url(/assets/img/rests/bangkok.jpg);
  height: 220px;
}

.glimage:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/assets/img/rests/scenery.jpg);
}
.gltext {
  position:absolute;
  z-index: 1000;
  color: #fff;
}
<div class="box">
  <div class="glimage">
    <div class="gltext">
      <h2>Travelling</h2> 
<p>These are texts.</p></div>

</div></div>

user_41012100

You just need to update your class .gltext by adding z-index:1000. You can just add z-index:1 it will also work because you are not using z-index but better to use some large value. Your updated .gltext class would be;

.gltext {
    position: absolute;
    color: #fff;
    z-index: 1000;
}

You can learn more about z-index from w3Schools

user_105249430
Related