colour lens for images

[magician11]

Hi there,

I have a series of images, and I want them to all look like as if I am viewing them through coloured glasses. They are all different colours, and I want them all to look a particular shade of green. Maybe something to do with opacity?

.menuIcons {

..?
}

thanks.

[Mottie]

I think the easiest option would be to make the images have some transparency over a colored background. Something like this (demo):

CSS

li {

background: #0f0;

display: inline-block;

width: 100px;

height: 100px;

}

li img {

opacity: 0.8;

filter: alpha(opacity=80);

}

​

HTML

[magician11]

That does work brilliantly. However, when I applied it to my images (which are little icons with transparent backgrounds over a white background — view it here) I see a green background around them.

I guess I realise now that I just want the images themselves to move towards a shade of green. Your code works great for completely square/rectangle images. So maybe something for an image program like The Gimp instead?

Also for my education, what is the difference between these two lines?

    opacity: 0.8;

filter: alpha(opacity=80);

thank you for your solution!

[Author]

Posts