image opacity from 0 to 1 with css - css

Question

I want my images to look like following:
The bottom part of the image is transparent, and to the top its getting to opacity 1.
I can do this effect with a color, with linear gradient:
-webkit-linear-gradient(black, transparent);
But is it possible with images too?

Answer 1

The newest and coolest way I know is using HTML 5 mask.
It goes like this:
CSS:
.masked
{
mask: url(#m1);
}
HTML 5:
<svg width="0" height="0">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
<stop stop-color="white" offset="0"/>
<stop stop-color="black" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.1" width="1" height="0.9" fill="url(#gradient)" />
</mask>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350">
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg"
width="500" height="350" class="masked"></image>
</svg>
jsFiddle Demo
For further reading:
Applying SVG effects to HTML content (Live example)
CSS Masking
Create Vector Masks using the HTML5 Canvas

Answer 2

My attempts with CSS :)
Codepen example: http://cdpn.io/hzBav
CSS (Update with fadeout)
figure {
display: inline-block;
position: relative;
}
.overlay {
display: block;
height: 300px;
position: absolute;
width: 300px;
background-image: -moz-linear-gradient(
rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 85%
);
}
.overlay:after {
content: '';
display: block;
height: 300px;
width: 300px;
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%
);
}
HTML
<figure>
<div class='overlay'></div>
<img src='http://placekitten.com/300/300' />
</figure>
Update based on comments.