Image hover bump pushing other content around

[Ulterior]

Sorry to keep on posting for help, just having alot of issues getting this to work, everything's fine except when I add this code line : .E:hover { opacity: 0.8;margin-top: 6px;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999;} I have 9 images now like this 1 2 3 4 5 6 7 8 9 Now when hovered on with the margin top part in, as a bump effect most of them work fine except when I hover on 3 and 6, for instance if I hovered on 3 it would make 6 and 9 bump up with it and make 4,5,7 and 8 push right down to my footer, moving anything that was there before. No. 6 does this too, to the images below it,

[Ingolme]

If it's just a hover effect then you can use relative position to make the image displace without changing the page flow:

.E {    position: relative;    top: 0;    left: 0;}.E:hover {    top: 6px;}

This is not for layout purposes, it is only for a hover effect. The CSS I gave you is in addition to any styling that you already have for the image and is not meant to replace it.

[Ulterior]

If it's just a hover effect then you can use relative position to make the image displace without changing the page flow:

.E {	position: relative;	top: 0;	left: 0;}.E:hover {	top: 6px;}

This is not for layout purposes, it is only for a hover effect. The CSS I gave you is in addition to any styling that you already have for the image and is not meant to replace it.

So the problem is using margin to bump up and I should just use top? I still don't quite understand why it does that, but thanks you fixed the problem . Edited May 31, 2012 by Ulterior