2

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.stack.imgur.com/DGPHU.jpg" alt=""/>
   </div>
   <div class="content_box">
     <span>Teste</span>
   </div>						
 </div></a></li>
</ul>

está assim, acho que da pra melhorar

inserir a descrição da imagem aqui

1 Resposta 1

2

Cara vc precisa basicamente ajusta onde o seu gradiente vai começar. No caso aqui eu coloquei para ele começar depois de 25%, ou seja, o 1/4 da altura total vai ser ocupada totalmente pelo preto, e nos outros 3/4 faz o gradiente até o preto desaparecer.

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

inserir a descrição da imagem aqui

Vc pode ler mais sobre as propriedade do linear-gradiente aqui: 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .