Transparent (opacity) image from top 0% to bottom 100% in CSS

Question

Its possible do it? Just in CSS, like this picture, so I mean if I put on <div> tag background image, I need it to be transparent from top to bottom.

I want to create something similar to the image below:

Answer 1

As other answers state : making the image transparent from top to bottom is not possible in CSS.

BUT

If you have a solid background color (or similar) you can simulate that transparency whith CSS3 inset box-shadows.
For the image white overlay and the semi transparent black rectangle. In the following demo, I used pseudo elements to minimize HTML markup.

DEMO

Output :

HTML :

<div class="image"></div>

CSS :

.image{
    position:relative;
    height:500px;
    width:500px;
    margin:50px auto;
    background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');
    background-size:cover;
    -moz-box-shadow: inset 0px 850px 500px -500px #fff;
    -webkit-box-shadow: inset 0px 850px 500px -500px #fff;
    -o-box-shadow: inset 0px 850px 500px -500px #fff;
    box-shadow: inset 0px 850px 500px -500px #fff;
}
.image:before,.image:after{
    content:'';
    position:absolute;
    left:5%;
    opacity:0.5;
}
.image:before{
    top:0;
    width:20%;
    height:100%;
    -moz-box-shadow: inset 0px 850px 500px -500px #000;
    -webkit-box-shadow: inset 0px 850px 500px -500px #000;
    -o-box-shadow: inset 0px 850px 500px -500px #000;
    box-shadow: inset 0px 850px 500px -500px #000;
}
.image:after{
    width:20%;
    height:10%;
    top:100%;
    background:#000;
}

Answer 2

Actually, you can do this in webkit! Mozilla allows for SVG masks, but I won't get into that. Zero support in IE.

Demo: JSFiddle

HTML:

<div>
    <img src="http:/www.fillmurray.com/300/200"/>
</div>

CSS:

div {
  -webkit-mask-size: 300px 200px;
  -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, 
  color-stop(0.00,  rgba(0,0,0,0)),
  color-stop(1.00,  rgba(0,0,0,1)));
}

Reference: http://caniuse.com/css-masks