How to add a gradient/filter in the image in CSS

Question

I have an image right here:

and I want to replicate the css styles in the website theverge.com (see image below)

I will use this in my blog (in the main page) because im trying to replicate what the website theverge.com have. It's like having the Title of the post and the author's name over the semi transparent gradient and featured image.

please help.

here's the structure of my html

http://jsfiddle.net/Kareen/kwPP8/2/

<div class="content">
    <h3>Some Title Goes Here</h3>
    <div>Author: Bill Jones</div>
    <img src="http://lorempixel.com/300/200/nature/5" />           
</div>

Answer 1

With the current structure (which you indicate is required) a pseudo-element positioned over the main div would do the trick.

Note: I am only solving the overlay issue. You would still need to position the text elements. Ideally restructuring the HTML would be the best course.

JSfiddle Demo

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
    position: relative;
    margin:10px;
    border:1px solid grey;
        display: inline-block;
}

.content img {
    display: block;
}

.content:after {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0.65) 100%);
}

Prefixing would be required and browser support would probably be IE9+ (non-filter gradients)

Answer 2

You could do something like this:

<div class="block">
    <div class="content">
        <h3>Some Title Goes Here</h3>
        <div>Author: Bill Jones</div>
    </div>
</div>

CSS:

.block {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px #DDD solid;
    background: url(http://lorempixel.com/300/200/nature/5) no-repeat 0 0;
}
.block .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    color: #EEE;
    padding: 10px;
}

Demo: http://jsfiddle.net/kwPP8/