Q:

Create banner with gradient opacity overlay

I need to create the following Banner:
http://schuub.net/banner.png
My question is,
how can I create this gardient from white to transparent which overlays the image partially on the left.
My html can be found here:
http://schuub.net/banner.html
  <!doctype html>
<html lang="en">
<head>

    <style>
        body {
            margin: 0 auto;
            width: 1024px;
        }

        .my-banner {
            background-repeat: no-repeat;
            background-position: right -175px;
            background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
            height: 200px;
            width: 100%;
            position: relative;
            border:solid 1px;
        }

        .banner-data {
            position: absolute;
            left: 0;
            top: 0;
            width: 70%;
            height: 100%;
            background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
            border:solid 1px;
        }
    </style>
</head>

<body>
    <div class="my-banner">
        <div class="banner-data">
        </div>
    </div>
</body>
</html>

Cheers,
Stefan

A:

Try this:
FIDDLE
HTML
<div class="my-banner"></div>

CSS
    body {
    margin: 0 auto;
    width: 1024px;
}
.my-banner {
    background-repeat: no-repeat;
    background-position: right -175px;
    background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
    height: 200px;
    width: 1024px;
    background: url('http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg') no-repeat;
}
.my-banner:after {
    content:" ";
    height: 200px;
    width: 1024px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border: 1px solid black;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */
}

