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:


HTML


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.

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

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


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

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.

Topic closed & moved.