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


Tags: css,filter,gradients

Problem :

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>


Solution :

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)


    CSS Howto..

    How generate width html element to fill rest of width window

    How to make dropdown list unselectable?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    How to Add custom Css Clases to PyroCMS contact form elements

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How to include php page which include also a css file?

    how to create bar code like in a horizontal line using css (For Email)

    How to align an iframe horizontally (in the centre of the screen) with CSS?

    How does a document reference an SCSS file?

    How do I optimize a very loooong page with TONS of images on it?

    How do I move a list's bullet point to the right side of the text?

    How to center a div horizontally in a table using CSS

    How to make my delete buttons responsive and stay absolute on my thumbnails

    How to align an img and a carousel next to each other, with max-width of 1000px?

    how to code different type of border in css?

    How to get conditional css to work on Blogger/Blogspot?

    How to organise my web content?

    How to override a display:none property applied to parent element in specific child elements

    how to set width of piechart in dc.js through css

    How to dynicamlly center the center of a div based on screen size

    how to put all labels in bold with css

    How to embed Javascript in CSS?

    How to extend jQuery.css from plugin

    How to center div within col-md-12 in bootstrap

    How can I find the css error when I run a jquery plugin on IE8?

    Getting the title of a picture overlayed onto the picture of a slideshow

    How to create a border that will outline div minus the margins

    How to load dynamic CSS files based on condition

    How to change css rules of external stylesheet [duplicate]