Forums

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

<ul>
    <li><img src="http://placekitten.com/100/100&quot; alt="" /></li>
    <li><img src="http://placebear.com/100/100&quot; alt="" /></li>
    <li><img src="http://placedog.com/100/100&quot; alt="" /></li>
</ul>

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!

treehouse : what would you like to learn today?

Forums

colour lens for images