CSS Gradient On Top An Image Tag (HTML)

Question

I'm trying to pull off this effect:

https://i.stack.imgur.com/VRKpI.jpg

The gray is a placeholder for the images.

My goal was to use a CSS Gradient (White to Transparent) and have the image display below the gradient. The placeholder image will eventually be the posts featured images for a wordpress theme. Which is why I didn't use a background image.

My coded version looks like this: https://i.stack.imgur.com/oWwm7.jpg

I'm not sure how to get it to drop below the gradient. I tried using a Z-index but that hides the image behind everything.

Here's how my code looks:

HTML:

<article class="inlineContainer newsBox"><!-- Gradient is on newsBox class -->
    <div class="details">
        <div class="image">
            <strong class="tag">Games</strong>
            <img src="images/newsimg.jpg" alt="preview" /> <!-- Image I want Behind Gradient-->
        </div>
        </div>              
        <div class="post borderBox">
            <h3><a href="">We will tell you everything about Aatrox New Champion</a></h3>
            <p>Aliquam erat volutpat. Morbi a augue et velit congue faucibus. Quisque suscipit porta iaculis. Vivamus et elementum orci. Proin euismod ante nisi, vel consectetur massa dapibus id. Donec condimentum... Ut quis nisl at erat ultricies pellentesque at ut justo. </p>
            <div class="bottom">
                <div class="metaDetails">
                    <a class="author borderBox" href="">Doublelift</a>
                    <a class="comments borderBox" href="">1289 Comments</a>
                </div>
                <a class="readMore" href="">Read More</a>
            </div>
        </div>
</article>

CSS:

.newsBox {
    border: 1px solid #bdccd3;
    border-radius: 5px;
    box-shadow: 0px 2px 3px 0px rgba(207, 218, 220, 1);
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.image {
    height: 100%;
    width: 160px;
    margin: 0 auto;
    position: relative;
    background-color: grey;
}
.image img {
    height: 261px;
    width: 160px;
    display: block;
}

Answer 1

Someone left an answer here and then with a jsfiddle and then deleted it. Not sure why, but it sent me in the right direction.

Here's what I did:

1. Changed the content background to the white color of the gradient.
2. Added a new container around the image. Put the gradient on this container.
3. Changed z-index of the image to -1.

This puts the gradient over the image, and it fades to the white color of the content bg.

It works perfectly. Thanks to whoever posted that jsfiddle!

Answer 2

I don't know if you found a solution already. I had a similar problem than you, where I wanted to put a transition from transparent to white in my picture.

The CSS I used is

    .gradient-effect{
        position: relative;
        display: block;
    }
    .gradient-effect::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        right: 0;
        height: 30%;
        background: linear-gradient(to bottom,rgba(255,255,255,0),#CCC) repeat left top;
    }

And the HTML it was like this

<div class="gradient-effect">
    <img class="img-responsive" src="images/my-image.jpg" alt="">    
</div>

I hope this helps you.