Apply overlay gradient to images just like myspace

Question

I want to apply gradient overlay to a lot of images just like myspace did in their new design . All the images have a title with black gradient background .

I searched but most of the tutorials are shown using a background image on a div . I want to apply this property to all the <img> tags appearing on my page.

Here's the closest tutorial I found in terms of what I want to achieve . But this is also explained using a background image.

enter image description here

If you look at the background of the title. The black background ensures that the text is clear enough .

Can you please help me out in writing a general css for achieveing this on all images ?

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

You should really put more effort into trying it out first.. I found this interesting so I got you started.. http://jsfiddle.net/MpmNc/1/

.overlay {
    content: 'test';
    width: 100%;
    height: 100%;
    background-color: rgba(100,255,50,0.5);
    position: absolute;
    top: 0;
}

.overlay-wrap {
    display: inline-block;
    position: relative;
}

Unfortunately it doesnt seem like css alone will suffice Does :before not work on img elements?

For your gradient: http://www.colorzilla.com/gradient-editor/

edited May 23 '17 at 12:03

Community

1
1

answered Jan 31 '14 at 19:59

RyanS

3,964
3
23
37

Thank you @RyanS. I want to apply that bottom black linear-gradient background which makes the title more visible. I want to apply that property to each and every image on my page . I am trying it myself also :) – Mj1992 Jan 31 '14 at 20:04
Check out the link I added – RyanS Jan 31 '14 at 20:07
thnx man finally got it. – Mj1992 Jan 31 '14 at 20:19
Care to share? @Mj1992 – RyanS Jan 31 '14 at 20:22
yeah used your gradient site to generate the code and copied it in a css class – Mj1992 Jan 31 '14 at 20:51

Apply overlay gradient to images just like myspace

1 Answers1