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]

waiting for fixtatik or Mike.

Ok i did it myself.
I used this.
http://views-under-construction.blogspot.c...ml#sizeImgHover

Now im having a new problem...

When the image enlarges, everything around it gets shifted around. It looks like terrible websites where a link enlarges and it moves stuff. I found a way to fix it once on an old site of mine but I forgot how. Ill try and dig it up...

[Mickey]

Try placing it in a container with a definite size that's similar to the size of the link's hover, like this:

CODE

<style>
.linkcontainer {height:120px; width:120px;}
</style>

<p class="linkcontainer">
Insert link code here.
</p>

That way, the space that the hover takes up will already be there and so things won't get shifted.

[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.

[Mickey]

Topic closed & moved.