Transparent Image Overlay

Question

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.

Answer 1

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>