I'm trying to pull off this effect:

https://i.sstatic.net/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.sstatic.net/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:

    

        

            Games
             
        
        
              
        

            
We will tell you everything about Aatrox New Champion
            
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. 
            

                

                    Doublelift
                    1289 Comments
                
                Read More
            
        

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;
}