Overlay transparent gif over image

I’m trying to set up a quick way to overlay a transparent gif over all images on my site. I saw lots of different sites with lots of different ways, but I was hoping someone here would be able give a the best solution for a modx based site.
My initial idea was to specify a transparent gif as a background image, and use z-index to raise it above the image i’m trying to protect. That didn’t seem to work. here is the code I used:



the gif is 1px

I added the class="transparent" call to each image tag.

I don’t have experience to help you but I did just bookmark a promising tutorial on this subject:
http://blog.adamoliver.net/tutorials/cross-browser-transparent-div-with-opaque-content/

Quote from: dev_cw at Feb 04, 2009, 02:22 PM

I don’t have experience to help you but I did just bookmark a promising tutorial on this subject:
http://blog.adamoliver.net/tutorials/cross-browser-transparent-div-with-opaque-content/

That’s a great tutorial, but I’m looking for info more directly related to overlaying a transparent image over another image. Maybe a plugin or snippet that will do this automatically for all images on the site.

If your adding that class to the image src link it wont work, as the image will still sit ontop of your Transparent gif, you also havn’t set a height and width for the class.

try wrapping the image with a div of that class.

Also there is a bug in ie that doesn’t listen to the z-index unless you position the element either relatevly or absolutey.

That won’t work either because if you raise the div with z-index you automatically raise it’s content as well,... being the image. You need a second div that is positioned on top of the image (either relative or absolute). Something like this perhaps? (I haven’t tried)