CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
natem1270
natem1270

Reputation: 207

Transparent Image Overlay

I am trying to create a partially transparent blue overlay on an image. Like this- http://tinypic.com/r/2gtnq0i/9

Here is my attempt: https://jsfiddle.net/ypqL4zL4/

I thought that setting

z-index: 10;

would solve the issue, but I was wrong.

Upvotes: 0

Views: 112

Answers (1)

dunnmifflsys
dunnmifflsys

Reputation: 621

Your problem is that the image is contained within the element that has a background, so you can't see the background since the image is blocking it. Instead, have a div that contains the image, then the overlay. Here's the code:

.container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.image-size{
  height: 200px;
  z-index: 1;
}
.overlay{
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(66, 134, 244,.7);
  z-index: 10;
}
<div class="container">
  <img class="image-size" src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg">
  <div class="overlay">
  </div>
</div>

Upvotes: 1

Related Questions