<a> wrapping an image extends below the image
I'm obviously not understanding something fundamental here, but the anchor tag that wraps each image in the following grid is adding height to each containing div:
https://codepen.io/adamantonio/pen/PovNLYE?editors=1100
This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment).
I'm interested both in how to fix it, but why this is the default behaviour.
https://codepen.io/adamantonio/pen/PovNLYE?editors=1100
This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment).
I'm interested both in how to fix it, but why this is the default behaviour.
