Jump to content
Sign in to follow this  
seitenSCHNEIDER

Image overlay with :after - Question about Size

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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".

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...