How to get superimposed texture on top of inline image without extra layout with CSS?

Question

I need to apply texture to 100 images

like this.

I have a transparent .PNG texture file. if i use this as background then it will go for <img> . And I don't want to add another <img> or any additional span , div for texture and z-index .

Is there any other way to achieve this in CSS?

I need to use a specific .PNG texture, so I cannot use the CSS gradient .

I do not want to use the main product image as background .

Answer 1

I'm afraid it will be very difficult for you to get this texture overlaid on the image without adding an added element. If you cannot influence the html output, a little javascript will do the trick.

Another option is to place the texture on top of another image with absolute positioning. However, it is difficult to understand whether this is a viable option without additional context. Here is an example: http://jsfiddle.net/cPSFQ/1/ .

Answer 2

Glad your post is tagged CSS3

http://jsfiddle.net/WQTeE/2/

You need to create a reverse overlay mask. 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/

That’s all I am doing is displaying the image and the div in which we can use the texture image as the background and absolute positioning to display on the actual image.

Answer 4

To your question there is no pure css solution compatible with the browser. I understand that this answer does not meet your original criteria, but I decided that I would put it one way or another so that you could use it as an option.

Using pseudo-elements ( :before ) would be a logical choice for CSS3, but, alas, they do not work with img tags.

You need to do something, change the markup instead or add javascript. Assuming you can't edit the markup (sometimes you can't control the source data), but you can control javascript, you can 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).