How can I add a transparent to black gradient over a div / image?

Question

I have some flex boxes that contain an image and text.

.bItem {
    display: flex;
    display: block;
    justify-content: flex-end;   
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 9px;
    bottom: 0;
    left: 9px;
    padding: 18px;  
    background-size: cover;
    background-position: center center;
}

The HTML:

<div class="box">
 <a class="bItem" href="/about/" style="background-image:url(/images/one.jpg);" >
  <div class="bText white">
    <h3>TITLE</h3>
    Additional text here.</div>
  </a>
 </div>

I assumed something like this, attached to .bItem would work:

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);

Is there a way I can attach it to .bItem, preferably without having to add another class?

The issue I am having is that the text is hard to read, with the white text, and a gradient to black at the bottom would help make it more legible.

Answer 1

You can't use the gradient and background image at the same time on the same element, since both are a background-image. But you can assign the gradient to a pseudo element of .bItem, so you won't have to include an additional element for it. Also, you can just use transparent and black instead of rgba()

.bItem {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 9px;
  bottom: 0;
  left: 9px;
  padding: 18px;
  background-size: cover;
  background-position: center center;
  background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
}

.bItem:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
}

<div class="box">
  <a class="bItem" href="/about/">
    <div class="bText white">
      <h3>TITLE</h3> Additional text here.</div>
  </a>
</div>