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

Problem

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:

enter image description here

Problem courtesy of: Edoras

Solution

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 :

Simulated transparency over image with <strong>CSS3</strong> inset box shadows

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;
}
Solution courtesy of: web-tiki

Discussion

I made a fiddle for you to use. You have to use gradients with rgba. This is not supported in all browsers so you might want to manipulate the image instead. This however is the only way to do it in CSS.

Here's the code:

HTML:

<html>
    <head>
    </head>
    <body>
        <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" />
        <div class="whatever"></div>
    </body>
</html>

CSS:

body {
    margin:0px;
}

img {
    height:30px;
    position:relative;
}

.whatever {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #ff00ff),
        color-stop(1, rgba(0,0,0,0))
    );
    background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    height:30px;
    position:relative;
    width:100px;
    top:-34px;
}
Discussion courtesy of: Xweque

You should use background CSS property with linear-gradient value set by your self for your requeirement.

CSS

background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%);

Check this Demo jsFiddle Example

Discussion courtesy of: S͢ky D͢ream

I don't think it's possible to reproduce that exactly at all (especially if the top of the img is actually transparent). If you just need the 'transparency' to be from white to the image...it's a little easier..

JSfiddle Demo

HTML

<div class="wrapper">
    <div class="imgwrap">
    <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" alt=""/>
    </div>
</div>     

CSS

body {
    background-color: #bada55;
}

.wrapper {
    height:240px;
    display: inline-block;
    margin: 25px;
    border:1px solid grey;
    background-color: white;
    padding:8px;
}

.imgwrap {
    display: inline-block;
    position: relative;
}

.imgwrap:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
    z-index:1;

}
Discussion courtesy of: Paulie_D

Overlay a gradient div over the image with position absolute and z-index:

CSS

section{
    margin:0px 0px;
    padding:0px 0px;
    width: 300px;
    display:block;
    height: auto;
    position:relative;
}
section #overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
width:100%;
height:100%;
z-index:2;    
}
section #imgContainer{
    width: 300px;
    height: auto;
    margin: 0px 0px;
    padding: 0px 0px;
    overflow: hidden;
    display: inline-block;

}
section #imgContainer img{
    width: 300px;
    padding: 0;
    margin: 0;
    display: block;

}

HTML

  <section>
        <div id="overlay">
        </div>
        <div id="imgContainer">
           <img src="" />
        </div>
    </section>
Discussion courtesy of: FinkAvenue

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

Discussion courtesy of: anderooni

This recipe can be found in it's original form on Stack Over Flow.