using css to change size of the icon Options

[Maccabee]

basically I have an image that is a link and It is 128x128 pixels. But it has been changed to 100x100 using html. What I want is the image to then change to probably 120 or 128 pixels when I hover it. Also if there is any javascript to make it a smooth trnasition that would be great. Heres what I tried but did not work.

CSS:

CODE

a.iconlink:link, a.iconlink:active, a.iconlink:visited{
margin-top:-30px;
width:100px;
height:100px;
}

a.iconlink:hover{
margin-top:-30px;
width:120px;
height:120px;
}

HTML

CODE

<a class="iconlink" href="#"><img class="iconlink" style="margin-top:-40px;" border="0" height="100" width="100" src="contact.png"></a>

I was suprised that it didnt work. I wasn't sure if I was supposed to put the class in the image or the link. Also when I tried putting the style on the image into the css page(because I use as little html as possible) it doesn't work. I'm sure there is something obvious I didnt think of but troubleshotting didn't work.

[Maccabee]

Didnt work. It made each icon stack on top of eachother. Do have any suggestions for a movement for an icon not a link? I just need it to do something when it hovers...And I dont want to do image rollovers cause It would be to tedious when I want to change a link.

If i could just get each image to raise 5px when I hover! Right now when I hover it makes all the other icons go down 5 px and it stays stationary. I dont want to but i might have to use some tables. Yuck.


RESOLVED. I just put each icon in its own cell with a height larger then the icon and then I set it to have a bottom margin of 5px on hover.