5

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".........

user3411864
  • 624
  • 2
  • 12
  • 27
  • Can you post a screenshot of what you want ? I am unable to understand what this effect is – Ani Apr 10 '14 at 16:03
  • possible duplicate of [How to overlay images](http://stackoverflow.com/questions/403478/how-to-overlay-images) – Paulie_D Apr 10 '14 at 16:04
  • Not me but somebody did this: http://jsfiddle.net/weissraum/yF3Zx/ Might be worth looking into it – Ani Apr 10 '14 at 16:05

2 Answers2

6

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/

S.B.
  • 2,920
  • 1
  • 17
  • 25
0

I would have a 2px by 2px png image of a dot in CSS list under background image class. So this would look like this: 

.image-class {
    background: transparent url(../images/pattern.png) repeat top left;
}
a wan
  • 1
  • 3