Grow your CSS skills. Land your dream job.

Colour overlay

  • # July 14, 2009 at 8:12 am

    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

    # July 14, 2009 at 2:57 pm

    have you z-indexed it?

    # July 14, 2009 at 10:49 pm

    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…

    # July 15, 2009 at 6:04 am

    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

    # July 15, 2009 at 2:42 pm

    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!

    # July 16, 2009 at 6:51 am

    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

    # July 16, 2009 at 9:35 am

    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…

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".