On hover, show image at its original size?

[galvin]

I have code like this for many images, where the image size is always set to 50 pixels wide...

<a href='#' class="image"><img src="images/pic1.jpg" width=50></a>

 

Then I use CSS so that users can hover over the 50x50 image and have a bigger image show up, using...

 

Then I have this CSS for it...

a.image:hover img {
position: absolute;
        width: 200px;
z-index: 10000;
}

 

This code works perfectly. However, I don't necessarily want the hovered image to always be 200px. If the original image is 400px, I want it to be 400px. If the original image is only 120px, I want it to be 120px.

 

Is there anyway to do this in CSS. I tried "height: auto;" and that doesn't do it.

 

Any thoughts?

 

[cssfreakie]

well you need to remove the inline style because it will overwrite your properties set in the external stlyesheet i suppose.

maybe tryout this:

a.image img {
      width:50px;
   }

a.image:hover img {
   position: absolute;
        width: 100%; /* maybe even try auto */
   z-index: 10000;
   }