1

Hey this is my first ever question so I'm sorry if I get anything wrong.

I am trying to create a gallery using only HTML and CSS, so far I have got it all aligned and pretty much sorted. The problem is with the image enlarger on hover, when you hover over the enlarged image shows up on top of it's respective image but when you scroll down and hover over an image the enlarged image stays put and doesn't follow the picture.

I have tried playing about with the position property for both the image and the hovered image but I can't get it right. I still want the image to 'pop out' of the divs though.

I have the code pasted on the link below:
http://pastebin.com/fZxbKZEJ

gnat
  • 6,213
  • 108
  • 53
  • 73
Ashwood
  • 107
  • 1
  • 1
  • 10

1 Answers1

0

Change the position: absolute; to position:fixed;. This will make the image popup relative to the view. Play with margin to get the alignment right.

For eg:

margin: 100px auto 0;

So,

.bigImage{         
     display:none;
     position:fixed;
     height:310px;
     width:250px;
     margin:100px auto 0;
     border:2px solid #39F;
 }

If you Just want the popup to follow the original image, do this

.bigImage{         
     display:none;
     position:relative;
     height:310px;
     width:250px;
     margin:-260px 0 0 -45px;
     border:2px solid #39F;
 }
5hahiL
  • 1,056
  • 16
  • 36
  • With the second CSS style you mentioned, it seems to disrupt the other images. Is there a way to have it relatively absolute? so it's relative to the image's position but not disrupt the other images like absolute? – Ashwood Nov 25 '12 at 10:35