How to create a pattern overlay on top of an image

Question

I want my blog post thumbnails give a dotted overlay effect. The solutions I found where all CSS background-image controlled. But with such a solution it is harder to change the thumbnail.

Basically what I want is something like this:

                <div class="blog-image">
                    <div class="pixel-overlay"></div>
                    <img class="img-responsive" src="assets/img/post1.jpg">              
                </div>

The thumbnail is then a so you can easily control the source for other posts.

I did try many many things, but I never got it working. The pixel-overlay div will always push the IMG out of the way.

So how can I create an overlay without something like background-image: "assets/img/post1.jpg".........

Answer 1

Just use this CSS to overlay the image with an absolute positioned, full size pattern element:

.blog-image {
    position: relative;
    display: inline-block;
}
.pixel-overlay {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('path/to/pattern.png'); /* or any other overlay image/color */
}

And have the pixel-overlay element after the image:

<div class="blog-image">
    <img class="img-responsive" src="assets/img/post1.jpg">
    <div class="pixel-overlay"></div>
</div>

Like so: http://jsfiddle.net/Fx7HC/