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
Image overlay with :after - Question about Size
in CSS
Posted
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.