como fazer com que esse efeito se destaque nessa div escondendo o maximo possivel a parte de baixo da imagem, como se a div content_box
tivesse o background: #000
e fosse subindo suavemente conforme o seu 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.sstatic.net/DGPHU.jpg" alt=""/>
</div>
<div class="content_box">
<span>Teste</span>
</div>
</div></a></li>
</ul>
está assim, acho que da pra melhorar