Adding a CSS gradient to an image--NOT a background image - css

Question

This is a page that uses a carousel (I believe flexslider). The images in this carrousel are NOT background images. I need to add a gradient to the image, going from the bottom up, and from dark to zero opacity, so that I can make the text more legible. Is this possible?
http://hungersolutionsny.magadev.net

Answer 1

Personally I am not a big fan of adding markup just for styling. I would go for a pseudo element :before or :after
The code would look something like this:
HTML
<div class='slideshow-wrapper'>
<img src='http://www.placekitten.com/800/300'/>
<h2 class='title'>Some title</h2>
</div>
CSS
.slideshow-wrapper {
position:relative;
float: left;
}
.title {
position: absolute;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
.slideshow-wrapper:before {
content: '';
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
z-index: 1;
}
And an example: http://jsfiddle.net/VrGeM/

Answer 2

Overlay the image with an absolutely positioned <div> that's the same size as the slider. Give that <div> the gradient. Ensure that it's above the images but below the text on top of the images.
It's also pretty easy to create a transparent PNG to use rather than a CSS gradient, which will have the advantage of working in older versions of IE.

Answer 3

The way I ususally do this is via an absolutely-positioned DIV which sits on top of the images and contains the text. Then I give that an opacity like so:
background-color: rgba(0, 0, 0, 0.56);
If you want a gradient with opacity, this is a good tool which makes that easy: http://www.colorzilla.com/gradient-editor/

Answer 4

There are a number of ways to tackle this. Mainly targeting the background CSS property. If you're looking to target the text that is overlapping the image you could use something simple like this:
body.front #region-content #flexslider-1 ul.slides .views-field-field-banner-statement {
background-color:rgba(0, 0, 0, 0.5);
}
It doesn't apply a gradient but it does supply a black background with 50% opacity.

Answer 5

I usually don't use a gradient in this way... when faced with this problem in the past I have always used an inset box-shadow on a div wrapped around the image. Something like this...
<div class="img-wrap">
<img src="" />
</div>
And then in CSS apply the box-shadow to a pseudo selector...
.img-wrap {
display: block;
position: relative;
}
.img-wrap:before {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 -100px 80px 0px rgba(0,0,0,0.4);
}
img {
display: block;
width: 100%;
height: auto;
}
Check out this CodePen if you want to see it live... http://cdpn.io/qGwLe