Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 594
Kareen Lagasca Avatar asked Mar 08 '14 16:03

Kareen Lagasca


People also ask

How do I combine a background image and CSS3 gradient on the same element?

You can combine a background-image and CSS3 gradient on the same element by using several backgrounds. In our example below, we set the height and width of our <div> and add a background. Then, we set the background image fallback using the “url” value of the background-image property.

How you define the function in CSS image for a linear gradient?

The linear-gradient() function is an inbuilt function in CSS which is used to set the linear gradient as the background image. Syntax: background-image: linear-gradient( direction, color1, color2, ... )


1 Answers

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)

like image 161
Paulie_D Avatar answered Oct 05 '22 03:10

Paulie_D