How to get an overlay texture over inline image without extra mark-up using CSS? - css

Question

I need to give an overlay texture to 100+ images
like this.
I have transparent .PNG texture file. if i use this as background then it will go behind the <img>. And I don't want to add another <img> or any extra span, div for texture and z-index.
Is there any other way to achieve it in CSS?
I need to use specific texture .png so i cannot use CSS gradient only.
I don't want to use main product image as background.

Answer 1

I'm afraid you're going to have a very hard time getting that texture overlaid on the image without some added element to put it on. If you can't affect the html output, a little javascript would do the trick.
Another option is to place the texture over the top of the other image with absolute positioning. It's hard to know if that's a viable option without more context, however. Here's an example: http://jsfiddle.net/cPSFQ/1/.

Answer 2

Glad your post is tagged with CSS3
http://jsfiddle.net/WQTeE/2/
You have to create a reverse mask of the overlay. I tested this in FF9 and Chrome 16
img.stockphoto{
-webkit-mask-box-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-o-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-moz-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
}

Answer 3

You can try this.
http://jsfiddle.net/Bs7nv/
In this all I am doing is displaying an image and a div in which we can use the texture image as background and absolute positioning to display over the actual image.

Answer 4

There is no pure css solution to your question that's cross browser compatible. I realize that this answer doesn't meet your original criteria, but I figured I'd supply it anyways so that you could have it as an option.
Using pseudo elements (:before) would be a logical choice for CSS3, but alas, they don't work on img tags.
You'll have to do something, rather change the mark-up or add some javascript. Assuming you can't edit the mark-up (sometimes you can't control your source data), but can control the javascript, you could do it with pure javascript like this:
var transparentImage = "http://rd.cas.de/tim/native/image.png";
var imageList = document.getElementsByTagName("img");
var arrImages = [];
for (var i = 0; i < imageList.length; i++ ) {
// store the images as is first, otherwise the list is living and
// you loop forever...
arrImages.push(imageList[i]);
}
for (i = 0; i < arrImages.length; i++ ) {
// first wrap all the images in a relative positioned div.
var wrapper = document.createElement('div');
var newImg = document.createElement("img");
newImg.setAttribute("src", transparentImage);
newImg.style.position = "absolute";
wrapper.appendChild(newImg);
wrapper.appendChild(arrImages[i].cloneNode(true));
arrImages[i].parentNode.replaceChild(wrapper, arrImages[i]);
}
Here's a jsfiddle that does what you want (but with javascript).