CSS Gradient On Top An Image Tag (HTML)

Question

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:

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

Welcome to Stack Overflow! You'll get answers quicker if you create a working demo at jsfiddle.net so we don't have to debug code in our heads! — kthornbloom
– kthornbloom, Commented May 15, 2014 at 19:29
Thanks! Before I posted I was trying to find that site. But I couldn't find it, and wasn't sure if it was only for jquery/js. I'll go put one on there now. — Derek
– Derek, Commented May 15, 2014 at 19:30
Why not just position a transparent image absolutely over the content? — j08691
– j08691, Commented May 15, 2014 at 19:30
@j08691 I'm not sure what you're saying. Are you saying to make a gradient image and position that absolutely? If so how do I get that above the image but below the text? — Derek
– Derek, Commented May 15, 2014 at 20:02
You can use z-index to position elements on top of each other. You would make a transparent gradient image, and have it sit on top of your other content. — j08691
– j08691, Commented May 15, 2014 at 20:05

Eduardo AC · Accepted Answer · 2015-09-29 11:53:41Z

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.

answered Sep 29, 2015 at 11:53

Eduardo AC

1461 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek · Accepted Answer · 2014-05-16 15:29:31Z

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:

Changed the content background to the white color of the gradient.
Added a new container around the image. Put the gradient on this container.
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!

answered May 16, 2014 at 15:29

Derek

692 silver badges9 bronze badges

Collectives™ on Stack Overflow

CSS Gradient On Top An Image Tag (HTML)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related