Transparent gradient superimposing <div> without losing the "click"

Question

How can I do the image effect below by adding the gradient effect to the footer of <div> without this being done by images using position Absolute?

I would also like to maintain the gradient without losing the function of click in the user’s photo.

Answer 1

Click problem not being blocked by gradient can be solved in some browsers with CSS:

pointer-events: none

however, to make a version quite compatible, you may need some JS per warranty if you want to support IE less than 11, and other browsers a little more "old".

I made an example in red, just to facilitate visualization and testing. I put links to facilitate the click test:

#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.

Answer 2

There are several ways to do this effect but I will illustrate two:

Merging gradient with image in property background:

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 values being 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>

---

Note: if you want to add the effect to the tag <img> it has no pseudo-elements so I advise you to apply it by putting this tag within a <div>. If you need comment I will add the answer as a third way.

For example I used the property without vendor prefixes, however recommend that you use them, you can check the current compatibility on Can i use.