image opacity question

[moscarda]

i have seen several tutorials on how to apply slick image rollovers with different states of opacity. but this only seems to make images LIGHTER.

i would like to make all my linked images 50% DARKER on hover. is this possible? perhaps by overlaying a black png file with 50% transparency? i'm afraid i don't know how. any help?

i swear i've seen it but am having trouble remembering where.

thank you in advance.

[Twey]

The easiest way to do it is to wrap your images in an element with a black background, then vary their opacity.

[moscarda]

sorry, im still learning. can you explain what you mean by 'wrap' and 'element' and also exactly how to vary the opacity? i've noticed many techniques fail on certain browsers.

[djr33]

Put image on a black "thing", then turn down opacity with CSS.
http://www.mandarindesign.com/opacity.html
(First thing on a google search for "css opacity".)

[jscheuer1]

Another fairly easy approach would be simply to start out with a dark image, one that is as dark as you want it to become. Set its initial opacity to 50%. Then when you want it to get "50% darker", set its opacity to 100%.

[moscarda]

thanks guys, it worked fine, i just figured there had to be another way short of putting it on top a "black thing", cause now i've put black things behind 50 images in an already code-heavy thumbnail gallery.

too bad its not possible to overlay one image with another transparent image through css. maybe in the future?

[Twey]

Another fairly easy approach would be simply to start out with a dark image, one that is as dark as you want it to become. Set its initial opacity to 50%. Then when you want it to get "50% darker", set its opacity to 100%.

Hm. Less flexible, and would lose image quality.

i just figured there had to be another way short of putting it on top a "black thing", cause now i've put black things behind 50 images in an already code-heavy thumbnail gallery.

Use JS to generate the wrapper elements, if your effect requires JS anyway.

too bad its not possible to overlay one image with another transparent image through css. maybe in the future?

You can now. However, it still requires a separate element.

[jscheuer1]

too bad its not possible to overlay one image with another transparent image through css. maybe in the future?

This can currently be done:

<div style="position:relative;">
<img src="under.jpg">
<img src="over.jpg" 
style="position:absolute;top:0;left:0;opacity:0;filter:alpha(opacity=0);">
</div>

CSS style used is the most basic that will work in current release modern browsers that support opacity, and is shown inline for simplicity's sake.

[moscarda]

Use JS to generate the wrapper elements, if your effect requires JS anyway

can you point me to a js that does this sort of thing, or would i have to write it from scratch? i don't know js, i've only gotten this far by learning how to customize preexisting scripts to my needs.

You can now. However, it still requires a separate element.

can you explain? please and thanks

[Twey]

for (var e = document.images, s, i = e.length - 1; i >= 0; --i)
  if (e[i].className.indexOf("darken") > -1)
    (s = document.createElement("span")).appendChild(e[i].parentNode.replaceChild(s, e[i])).parentNode.style.backgroundColor = "black";

can you explain?

Same principle, but using an image rather than a flat background colour.