Menu
I am wondering if it is possible to apply tint to an opacity in css?
I have a PNG of various sizes. When the user hovers over the PNG, I want the PNG to change opacity to 0.5 with a tint of #000. According to w3schools, you only have the ability to modify the opacity value and not the tint which is always set to #FFF.
I have tried to position a black box with its opacity set on top of my PNG and via css had it toggle between display:none/block; upon PNG hover. This did not work as my PNGs are not rectangular images and are various dimensions meaning the black box did not cover only my PNG.
Are there any alternative solutions to my problem?
361
The background property in CSS can accept comma separated values. “Multiple” backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can “tint” that image.
Just give the image element a background color and on hover change the image's opacity so the background color shows through, giving the appearance of an image tint.
By adjusting the level of saturation you can achieve different shades of the blue color. So, if you set the saturation to a higher value such as 900%, you will get dark blue color. And if you set the saturation to lower value such as 500%, you will get a light blue color.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Webkit example: http://jsfiddle.net/5APXu/1/
div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }
This uses the CSS filter property, which is starting to gain support. There are numerous effects possible, so you can probably achieve your original desire of black/gray tint.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
