CODEWITHSUNDEEP
htmlcss
Mario Parra
Mario Parra

Reputation: 1554

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

Upvotes: 2

Views: 1025

Answers (1)

zgood
zgood

Reputation: 12571

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

Upvotes: 4

Related Questions