Como posso fazer o efeito da imagem abaixo adicionando o efeito degradê ao rodapé da <div>
sem que essa seja feita por imagens utilizando position absolute?
Gostaria também de manter o degradê sem perder a função de click na foto do usuário.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeComo posso fazer o efeito da imagem abaixo adicionando o efeito degradê ao rodapé da <div>
sem que essa seja feita por imagens utilizando position absolute?
Gostaria também de manter o degradê sem perder a função de click na foto do usuário.
O problema do clique não ser barrado pelo degradê pode ser resolvido em alguns browsers com CSS:
pointer-events: none
porém, para fazer uma versão bastante compatível, talvez seja necessário algum JS por garantia, caso queira suportar IE menor que 11, e outros navegadores um pouco mais "antigos".
Fiz um exemplo em vermelho, apenas para facilitar a visualização e testes. Pus links para facilitar o teste do click:
#lista {
position:relative;
}
#grad {
pointer-events: none; /* isto faz com que o clique "passe" adiante */
min-height:60px; /* Aqui voce define o tamanho do degrade */
width:100%;
position:absolute;
bottom:0;
/* Para branco, use 255,255,255,0 e 255,255,255,1 */
background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,1) 100%);
/* Para branco, use #00ffffff e #ffffff abaixo */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff0000', endColorstr='#ff0000',GradientType=0 );
}
<div id="lista">
<div id="grad"></div>
<a href="#">Um</a><br>
<a href="#">Dois</a><br>
<a href="#">Tres</a><br>
<a href="#">Quatro</a><br>
<a href="#">Cinco </a><br>
</div>
Veja que o clique funciona mesmo nos últimos ítens.
Há varias formas de se fazer esse efeito porem exemplificarei duas:
Mesclando gradiente com a imagem na propriedade background:
Caso a imagem que você postou seja apenas um elemento único você pode mescla-la com o gradiente da seguinte forma:
div {
background: linear-gradient(to bottom, rgba(255, 225, 255, 0) 20%, rgba(255, 225, 255, 1)), center top url(http://vignette4.wikia.nocookie.net/logopedia/images/f/fb/Arctic-monkeys-logo-wallpaper.jpg/revision/latest?cb=20141122194620);
background-size: cover;
height: 100vh;
width: 100vw;
}
<div></div>
Usando Pseudo-elementos:
Você pode também utilizar um pseudo elemento sob o elemento e gerar o efeito de gradiente com um dos valores sendo transparent:
div {
background: url(http://vignette4.wikia.nocookie.net/logopedia/images/f/fb/Arctic-monkeys-logo-wallpaper.jpg/revision/latest?cb=20141122194620) no-repeat;
background-size: cover;
height: 100vh;
position: relative;
width: 100vw;
}
div:after {
background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 1) 100%);
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
<div></div>
Obs.: caso queira adicionar o efeito à tag <img>
a mesma não possui pseudo-elementos então aconselho que aplique-o colocando essa tag dentro de uma <div>
. Caso necessite comente que adicionarei a resposta como uma terceira forma.
Para exemplificar utilizei a propriedade sem vendor prefixes, porem recomendo que você os utilize, você pode conferir a compatibilidade atual no Can i use.