Jump to content

Image hover bump pushing other content around


Ulterior
 Share

Recommended Posts

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,

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 by Ulterior
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...