Colour overlay

[benn]

hey

Im trying to add an image over an image. The image im trying to overlay is a 1px x 1px transparent color that will repeat to the width and height of the image it is overlaying.

The issue is i can’t get it to work….

i’ve tried using the

Code:

a:hover { background: url(pathto/images) repeat; }

But this is not working. And i can’t use css sprites as the images are all different.

Can anyone help me out on this please.

B

[EamonnMac]

You could also just change the transparency of the image itself using css –

Code:

-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

– might save you the trouble…

[benn]

If i reduce the opacity will this show the blue tint that i want?

Say if i put the blue as a background then on the hover state i reduce the opacity of the image. Will the blue show through?

B

[EamonnMac]

Yup. Just be sure to apply the transparency classes to the image itself, not the div. Otherwise they’ll both fade in tandem and it’ll just look washed out. You can change the opacity values (at 0.5 in the example) to whatever setting suits you best (i.e. how much pink you want to show through). Hope this helps!

[benn]

Hey Eamonn,
What you have suggested has work. But not for all images with an anchor link

I have the sidebar images working because i put an empty div in which had a background to it and then just faded the image that was on top of it down on the hover.

But when i try the same on my main content images they are floating to the left. So i thought by floating them to the right all my problems would be solved. Well not really as they seem to now overlap one another and not respecting the margins given to them. EEk!!!

Any ideas?

B

[EamonnMac]

I’m not sure I understand what’s happening there – is the new background pushing the images to the left?!

Have you a link to the page? I could have a closer look there…

[Author]

Posts