CODEWITHSUNDEEP
cssgradient
MDLG
MDLG

Reputation: 193

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

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

Upvotes: 6

Views: 13863

Answers (5)

arnonate
arnonate

Reputation: 495

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

Upvotes: 0

Pevara
Pevara

Reputation: 14310

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/

Upvotes: 10

hungerstar
hungerstar

Reputation: 21675

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.

enter image description here

Upvotes: 0

Michelle
Michelle

Reputation: 1844

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/

Upvotes: 1

Chris Herbert
Chris Herbert

Reputation: 6275

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.

Upvotes: 1

Related Questions