How do I create a fading effect on an image, from top to bottom, and how do I over-lap that with text?

Question

I want an Image to have a fading effect from top to bottom, so that no matter what color the image is the text that I want to put on the image is visible.

P.S. I'm not talking about a background image, I'm talking about a regular image. I only say this because when I look this up I see people asking how to do it with a bg image. Oh, and I want the overlaying fade to be black.

and what have you tried so far? I think you should read http://stackoverflow.com/help/how-to-ask — Luca, Jul 07 '15 at 11:04

score 0 · Answer 1 · answered Jul 07 '15 at 11:15

0

For this you can use a div overlay with backgroud:rgba(0,0,0,0.1).

<div>
<img src="">
<div style="position:absolute;height:50px;left:0;bottom:0;background:rgba(0,0,0,0.1)">Image Title</div>
</div>

Probably you may require to give index property as well.

answered Jul 07 '15 at 11:15

sachinkondana

564
5
15

what about overlapping? – divPath Jul 07 '15 at 11:19
Then try this:

Your title

– sachinkondana Jul 08 '15 at 09:32

How do I create a fading effect on an image, from top to bottom, and how do I over-lap that with text?

1 Answers1