How can I make the effect of the image below by adding the gradient effect to the <div> footer without this being done by images using position absolute ?
I would also like to maintain the gradient without losing the click function in the user's photo.
The problem of the click not being bound by the gradient can be solved in some browsers with CSS:
pointer-events: none
However, to make a fairly compatible version, you might need some JS for guarantee, if you want to support IE less than 11, and other browsers a bit more "old".
I made an example in red, just for easier viewing and testing. Pus links to facilitate the test of the 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.There are several ways to do this, but I'll illustrate two:
Merging gradient with the image in the background property:
If the image you posted is just a single element you can merge it with the gradient as follows:
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>Using Pseudo-elements :
You can also use a pseudo element under the element and generate the gradient effect with one of the transparent values:
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>Note: if you want to add the effect to the tag % with_% it does not have pseudo-elements so I advise you to apply it by putting this tag inside a% with%. If you need to comment I will add the answer as a third way.
For example, I've used the vendor prefixes property, but I recommend you use them, you can check the current compatibility at Can i use .