CODEWITHSUNDEEP
cssimagestyling
L84
L84

Reputation: 46298

CSS - Image and hover not working correctly

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!

Upvotes: 2

Views: 4610

Answers (4)

matt
matt

Reputation: 1025

If you are like me and don't like using sprites:

I came up with a quick and easy way to have the same effect (image fade to color) the only drawback is you need a transparent PNG, but works great with lots of buttons or social media icons.

HTML:

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS:

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

Let me know if you like it.

Upvotes: 0

kleinohad
kleinohad

Reputation: 5912

remove the hover css and change the image to this: 

<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />

and add this script to your page:

function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
}

Upvotes: 0

jwinn
jwinn

Reputation: 1125

You're better off having the original image and the hover state on the same element. Right now, the original is an image contained within the link tag, so it is on top.

Do this

  1. Remove the image

  2. Add this CSS to #login

    background: url("../images/skin/login.png") top left no-repeat;
display: block;
height: 26px;
width: 80px;

  3. It's better to have both images on the same image (a sprite), and just change the background position on hover. This eliminates flashing as the image loads upon first hovering. See the other answer by Matthew about that.

Upvotes: 1

Matthew Brown
Matthew Brown

Reputation: 1052

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

Upvotes: 3

Related Questions