Mario Parra Mario Parra - 14 days ago 5
CSS Question

Can't add linear gradient over img

I'm having issues adding a

linear-gradient
style to an
img
's parent
div
. I've accomplished what I want by loading the image as the
div
's background image, as opposed to as an
img
, but that requires more styling to render the same. Not sure if I'm missing something.

Here's my markup:

<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
<div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
<div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
<div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
</div>


Sass:

#owl-demo {
.owl-item {
background-image: linear-gradient(to bottom, transparent 50%, #191919 100%);
}
}


Working example: http://codepen.io/ourcore/pen/vygGeP

Answer

Set you img to z-index: -1; and it should work (don't forget to add position: relative; also).

Like this:

.owl-carousel .owl-item img {
    position: relative;
    z-index: -1;
}

Codepen

Comments