Image overlay with :after - Question about Size

[seitenSCHNEIDER]

I've made a mockup of a card style info box with an image as header which has an colored overlay with a height of 100% applied via the :after selector.

Oddly enough, the overlay is a little taller than the image and I got a green fringe at the bottom of the image. Can you explain to me what the problem is? You can see me mockup here: https://codepen.io/seitenschneider/pen/MWWRbvO

Any help is highly appreciated.

[Funce]

Hi there, the fix for this one will be to set your image to be

.box .box-image img {
  max-width: 100%;
  display:block; /*New thing*/
}

You won't find this very often from me, but I don't understand why this works. If someone could elaborate that would be good.

[Ingolme]

Images are inline by default. All inline elements are placed at the text baseline. There is always a bit of space reserved below the baseline, which is for hanging letters like "g" or "y", and you see this space below the image. In order to fix this, you can either make the image a block, or set its vertical align to "middle".