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?
1
-
what have you tried? Can you show us some code (not just a link to your site, we want your question to be useful to others in the future as well)?Pevara– Pevara2013-07-30 19:20:20 +00:00Commented Jul 30, 2013 at 19:20
Add a comment
|
5 Answers
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/
3 Comments
MDLG
Hi Peter, I find this interesting but I don't see it working on my own test and even on the link you provided...?
Pevara
you probably need to prefix the gradient code. It should work fine in chrome as is. Here is the fiddle with prefixes for the other browsers (defintly IE8 and up): jsfiddle.net/VrGeM/1
MDLG
Got this to work by grabbing code from a CSS gradient generator. Thanks! I did read that the pseudo-selector should use a double colon so that it works in IE. I can't test in IE9 because I don't have a copy. Do you know if this works with IE9?
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.
6 Comments
Paul D. Waite
Note that the transparent PNG won’t work in IE 6 without a JavaScript hack.
Chris Herbert
True, but I think at this point IE6 is pretty much dead. IE8, unfortunately, is not.
MDLG
IE 6 and 7 is def not a concern. We're not supporting them. Thanks!
Pevara
IE8 does support
progid:DXImageTransform.Microsoft.gradient, so no real need for the PNG there...Chris Herbert
Does using that cause issues with text readability? Often those filters make the antialiasing freak out.
|
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/
Comments
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.
Comments
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
