CODEWITHSUNDEEP
cssfiltergradient
Kareen Lagasca
Kareen Lagasca

Reputation: 939

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

I have an image right here:

enter image description here

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

enter image description here

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>

Upvotes: 11

Views: 51494

Answers (2)

Paulie_D
Paulie_D

Reputation: 115288

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)

Upvotes: 21

dfsq
dfsq

Reputation: 193301

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/

Upvotes: 0

Related Questions