Geek asks and answers

CSS - Tinted Opacity

I am wondering if it is possible to apply a hue to opacity in css?

I have PNG of different sizes. When a user hangs over a PNG, I want the PNG to change its opacity to 0.5 with a shade of # 000. According to w3schools , you have the option to change the opacity value, not the shade that is always set to #FFF.

I tried to put a black box with its opacity set on top of my PNG, and through css it switched between display:none/block;when hovering PNG. This did not work, since my PNGs are not rectangular images and have different sizes, which means that the black box does not cover only my PNG.

Are there any alternative solutions to my problem?

+5
source share
2

Webkit: http://jsfiddle.net/5APXu/1/

div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }

CSS , . , , , / .

+7

, . : http://jsfiddle.net/atbnn

img:hover {
  opacity: 0.5;
  background: #000;
}
+1

More articles:


All Articles