<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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
