0

I have here a image zoom made in CSS3 where the image zooms in, inside of its container on hover.

However, the problem I have is I get a drop at the bottom and I cannot figure out why this is!

http://www.jimharrison.co.uk/

Andrei
  • 42,814
  • 35
  • 154
  • 218
lejimmie
  • 378
  • 3
  • 15
  • seems like the outside div is bigger than the image on height, in the beginning. When you zoom in, the the image gets the height of the div. If you give a fixed height to the div, this doesn't happen, but i dunno why – sissy Feb 28 '14 at 14:47
  • Yup I fixed it when I set a fixed height on the div but I don't really want a fixed height because I'm aiming to make it responsive – lejimmie Feb 28 '14 at 14:53

1 Answers1

0

After looking for the issue i found the solution here and it works:

Image inside div has extra space below the image

just add: 

vertical-align: top

to your image.

Community
  • 1
  • 1
sissy
  • 2,908
  • 2
  • 28
  • 54
  • Yes this fixed it thank you very much. Maybe if I had searched just a tiny bit differently I'd have found the answer also. However, thank you for finding it for me! :) – lejimmie Feb 28 '14 at 16:37
  • You're welcome: sometimes you just have to search for a different term and things get solved. Unfortunately it's not always that easy :) – sissy Feb 28 '14 at 16:56