Something Nobody Told You About The Image Element (It Can Overflow!) – Master.dev Blog

The `<img>` element is a CSS 'replaced element' with two distinct sizes: the image container (sized via CSS) and the image resource (the actual content). This separation means images can overflow themselves — something most developers never consider. Properties like `object-fit: cover`, `border-radius`, `object-fit: none`, and `object-position` can all cause the image content to extend beyond its container boundaries. By default, browsers apply `overflow: clip` to images, hiding this overflow. Setting `overflow: visible` reveals it and enables creative CSS effects: hover reveals, 3D transitions, entry animations using `@starting-style`, and even a screen loader animation — all using a single image element with no extra HTML.