CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152787

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

I need to give an overlay texture to 100+ images

like this.

enter image description here

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.

Upvotes: 4

Views: 3130

Answers (4)

PriorityMark
PriorityMark

Reputation: 3247

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

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39882

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);
}

Upvotes: 1

Virendra
Virendra

Reputation: 2553

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.

Upvotes: 0

Wes Pearce
Wes Pearce

Reputation: 259

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

Upvotes: 1

Related Questions