Overlay effect from bottom to top

Question

how to make this effect stand out in this div by hiding as much as possible the bottom of the image, as if the div content_box had the background: #000 and was rising gently according to his height

img {
  float: left;
  border: none;
  width: 100%;
  height: 100%;
}
ul.nav {
  float: left;
  width: 100%;
  display: block;
}

  ul.nav li .mbp {
  float: left;
  margin: 0 15px 0 0;
  width: 232px;
  height: 300px;
  transition: .6s;
  background-color: #3A4063;
  /*border: 1px solid transparent;*/
  position: relative;
}

ul.nav li:last-child .mbp {margin: 0;}

ul.nav li .mbp .img_box {
  position: absolute;
  top: 0;
  left: 0;
  transition: .6s;
  height: 100%;
  overflow: hidden;
}

ul.nav li:hover .mbp .img_box {opacity: .8;}

ul.nav li .mbp .content_box {
  position: absolute;
  height: 80%;
  bottom: 0;
  padding: 5px 5px;
  box-sizing: border-box;
  background: linear-gradient(0deg, #000, transparent);
}

<ul class="nav">
   <li><a href=""><div class="mbp">
   <div class="img_box">
     <img src="https://i.stack.imgur.com/DGPHU.jpg" alt=""/>
   </div>
   <div class="content_box">
     <span>Teste</span>
   </div>						
 </div></a></li>
</ul>

It’s like this, I think you can get better

Answer 1

Dude you need to basically adjust where your gradient will start. In case here I put it to him to start after 25%, i.e., the 1/4 total height will be fully occupied by black, and in the other 3/4 makes the gradient until black disappears.

background: linear-gradient(0deg, #000 25%, transparent);

You can read more about the property linear-gradiente here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

ul.nav {
  float: left;
  width: 100%;
  display: block;
}

  ul.nav li .mbp {
  float: left;
  margin: 0 15px 0 0;
  width: 232px;
  height: 300px;
  transition: .6s;
  background-color: #3A4063;
  /*border: 1px solid transparent;*/
  position: relative;
}

ul.nav li:last-child .mbp {margin: 0;}

ul.nav li .mbp .img_box {
  position: absolute;
  top: 0;
  left: 0;
  transition: .6s;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
ul.nav li .mbp .img_box img {
  width: 100%;
  height: auto;
}

ul.nav li:hover .mbp .img_box {opacity: .8;}

ul.nav li .mbp .content_box {
  position: absolute;
  height: 80%;
  bottom: 0;
  padding: 5px 5px;
  box-sizing: border-box;
  background: linear-gradient(0deg, #000 25%, transparent);
  width: 100%;
}

ul {
    list-style: none;
}

<ul class="nav">
  <li><a href=""><div class="mbp">
  <div class="img_box">
    <img src="https://i.stack.imgur.com/DGPHU.jpg" alt=""/>
  </div>
  <div class="content_box">
    <span>Teste</span>
  </div>						
</div></a></li>
</ul>