Question

I’ve got two images, that when you hover the other image should show, and show brighter.

For some reason, the image (in .top-1-1) looks more faded when you hover the mouse over it.

How to fix this?

HTML

 <div class="top-1-1"><a href="experiences.aspx">
       <img src="images/myexperience.png" width="111" height="23" alt="My Experience" /></a>
  </div>

CSS

.top-1-1 {
    float: left;
    width: 111px;
    height: 23px;
    margin: 10px 0px 0px 10px;
    padding: 0;
    background :url("../images/myexperience-on.png") no-repeat;

}

.top-1-1 a, .nav a:link, .nav a:visited {
  display:block;
  width: 111px;
  height: 23px; 
}

.top-1-1 a:hover img {
  visibility:hidden;
}

Answer 1

I had a similar problem once in IE with a png image. Is it with all browsers? If so, it might be as Ennui said with transparency in the image. Maybe turn it into a jpeg if transparency isn’t a requirement. Also, is javascript a possibility? Then you can get rid of some of that CSS.

<div class="top-1-1"><a href="experiences.aspx">

<img onmouseover="this.src='images/myexperience-on.png'" onmouseout="this.src='images/myexperience.png'" src="images/myexperience.png" width="111" height="23" alt="My Experience" /></a>

</div>

also, with the above, Where is the beginning of the ‘a’ tag? I only see the end.