Home/ Questions/Q 6132607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:07:21+00:00

I have an image on a page and when I hover the image should

  • 0

I have an image on a page and when I hover the image should show a different color. The hover itself works but the original image is on top of the hover image. I have tried setting z-index but does not work correctly.

Here is the CSS:

    #login, #logout { 
float:left;
padding: 0px 10px; 
margin-left:5px;
margin-top:15px;
z-index:1;
}

#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}

Thanks for any help and advice!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    May I suggest you use CSS sprites instead. I believe they are a much more efficient method of achieving what you want.

    Rather then ‘re-inventing the wheel’ and writing how to do it here have a look at http://sixrevisions.com/css/css-sprites-site-speed/ or just google ‘CSS Sprites’.

    They decrease HTTP requests and therefore amount of bandwidth your site uses.

    Hope that helps. If not, comment and i’ll try and come up with a better option.

    Cheers,
    Matthew

    • 0