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