{"id":10580,"date":"2026-08-03T09:56:57","date_gmt":"2026-08-03T14:56:57","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10580"},"modified":"2026-08-03T09:56:59","modified_gmt":"2026-08-03T14:56:59","slug":"something-nobody-told-you-about-the-image-element-it-can-overflow","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/something-nobody-told-you-about-the-image-element-it-can-overflow\/","title":{"rendered":"Something Nobody Told You About The Image Element (It Can Overflow!)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Adding images to a website is a pretty straightforward task. You grab your link, and you summon the image element like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"your_link\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"image content\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Then, you add your favorite CSS, and you have a nice-looking image!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What if I tell you that the most common element is hiding some secrets? You have been working with images for too long, but you have probably never noticed the little quirks I will show you here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think I am exaggerating? Follow along, and you will see!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">An Image Can Overflow<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you inspect the CSS code of an image element, you will notice default styles applied by the browsers, and one of them is <code>overflow: clip<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"885\" height=\"261\" src=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/1RTape8R.png?resize=885%2C261&#038;ssl=1\" alt=\"\" class=\"wp-image-10582\" style=\"aspect-ratio:3.390942348934023;width:626px;height:auto\" srcset=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/1RTape8R.png?w=885&amp;ssl=1 885w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/1RTape8R.png?resize=300%2C88&amp;ssl=1 300w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/1RTape8R.png?resize=768%2C226&amp;ssl=1 768w\" sizes=\"auto, (max-width: 885px) 100vw, 885px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It means that any overflow is clipped\/hidden by default. We can, of course, change that and make the overflow visible:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\u00ec<span class=\"hljs-selector-tag\">mg<\/span> {\n  <span class=\"hljs-attribute\">overflow<\/span>: visible;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><em>But what could overflow an image?<\/em> We are dealing with a single element that cannot contain any other element. There is no container-content relation to talk about overflowing!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Actually, an image element has content, and its content is the image resource. It\u2019s confusing, right? Let\u2019s make a figure to better understand:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"599\" height=\"408\" src=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/geP_asdr.png?resize=599%2C408&#038;ssl=1\" alt=\"\" class=\"wp-image-10583\" style=\"width:449px;height:auto\" srcset=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/geP_asdr.png?w=599&amp;ssl=1 599w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/geP_asdr.png?resize=300%2C204&amp;ssl=1 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;img&gt;<\/code> element (the HTML element) is the \u201ccontainer\u201d, and the image resource (the actual image) is loaded inside that \u201ccontainer\u201d and becomes the \u201ccontent\u201d. We have our container-content relation so we can talk about overflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even with this clarification, it\u2019s hard to imagine how the content of the image can overflow, but there is a very common situation where this can happen. One CSS line that you know for sure:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">object-fit<\/span>: cover;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Here is a demo where you can <strong>hover<\/strong> the image to show\/hide the overflow:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xbgydXM\/22b48d72cecc0e4cb01c625c66707065\" src=\"\/\/codepen.io\/anon\/embed\/xbgydXM\/22b48d72cecc0e4cb01c625c66707065?height=400&amp;theme-id=1&amp;slug-hash=xbgydXM\/22b48d72cecc0e4cb01c625c66707065&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xbgydXM\/22b48d72cecc0e4cb01c625c66707065\" title=\"CodePen Embed xbgydXM\/22b48d72cecc0e4cb01c625c66707065\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Surprising, right? The <code>object-fit: cover;<\/code> declaration tries to maintain the intrinsic ratio of the image to avoid any distortion. This generally means that some parts of the image get clipped. To be more precise, the image \u201ccontent\u201d is bigger than the image \u201ccontainer,\u201d leading to some overflow. That overflow is, by default, clipped, but we can change that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An image can overflow\u2026 itself!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What if I tell you there is another well-known property that can make an image overflow?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think about it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, you know it very well!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You got it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s <code>border-radius<\/code>! The image, which is a rectangle, can overflow its rounded corners.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bNgmvQQ\/c2675c2a45e6c6c172a75707a3d218c1\" src=\"\/\/codepen.io\/anon\/embed\/bNgmvQQ\/c2675c2a45e6c6c172a75707a3d218c1?height=400&amp;theme-id=1&amp;slug-hash=bNgmvQQ\/c2675c2a45e6c6c172a75707a3d218c1&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bNgmvQQ\/c2675c2a45e6c6c172a75707a3d218c1\" title=\"CodePen Embed bNgmvQQ\/c2675c2a45e6c6c172a75707a3d218c1\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Another less common situation where an image can overflow is when using <code>object-position<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">object-position<\/span>: <span class=\"hljs-number\">50px<\/span> <span class=\"hljs-number\">0<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The above will translate the image content by <code>50px<\/code> from the left without affecting the image element (the container), which will logically create an overflow.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJpxRZx\/df78c3597680d45f5c2af2739cf9960f\" src=\"\/\/codepen.io\/anon\/embed\/XJpxRZx\/df78c3597680d45f5c2af2739cf9960f?height=400&amp;theme-id=1&amp;slug-hash=XJpxRZx\/df78c3597680d45f5c2af2739cf9960f&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJpxRZx\/df78c3597680d45f5c2af2739cf9960f\" title=\"CodePen Embed XJpxRZx\/df78c3597680d45f5c2af2739cf9960f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Yet another overflow! We will see a bit later how this feature can be used to create some cool demos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><code>object-fit: none<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When talking about the <code>object-fit<\/code> property, everyone thinks of the <code>cover<\/code> and <code>contain<\/code> values, but if you check <a href=\"https:\/\/www.w3.org\/TR\/css-images-3\/#the-object-fit\">the specification<\/a>, you will find more values, and one of them is interesting: the <code>none<\/code> value.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>none<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The replaced content is not resized to fit inside the element\u2019s content box<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">It has quite a strange definition, and <strong>no<\/strong>, it\u2019s not the default value. To better understand what it does, let\u2019s consider the following configuration:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80vw<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">80vh<\/span>;\n  <span class=\"hljs-attribute\">object-fit<\/span>: none;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJpxREy\/895fe2e56b3cacadccad180911a15715\" src=\"\/\/codepen.io\/anon\/embed\/XJpxREy\/895fe2e56b3cacadccad180911a15715?height=450&amp;theme-id=1&amp;slug-hash=XJpxREy\/895fe2e56b3cacadccad180911a15715&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJpxREy\/895fe2e56b3cacadccad180911a15715\" title=\"CodePen Embed XJpxREy\/895fe2e56b3cacadccad180911a15715\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Do you see what is happening?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The image element (the container) is sized using the viewport dimension (it has a variable size), but the image resource (the content) keeps a fixed dimension, which is the intrinsic size of the image resource (300 x 300 in our case).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As the definition states, the content is not resized. Regardless of the image dimension you set using CSS, the content will remain fixed. This means we can also have overflow when using <code>object-fit: none<\/code> if the image element is smaller than its content.<\/p>\n\n\n\n<p class=\"learn-more wp-block-paragraph\">But what is the default value of <code>object-fit<\/code>?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s the <code>fill<\/code> value, and it has the exact opposite effect to the <code>none<\/code> value.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>fill<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The replaced content is sized to fill the element\u2019s content box<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Whatever the size of the image resource (its intrinsic size), it will always get sized to fit the size of the image element set using CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the previous demo with the ability to change the <code>object-fit<\/code> value. Open the demo in full screen and resize the page to better understand the effect of each value.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RNKeMaK\/d47d68b7fc433788fad7b12bf51c9021\" src=\"\/\/codepen.io\/anon\/embed\/RNKeMaK\/d47d68b7fc433788fad7b12bf51c9021?height=850&amp;theme-id=1&amp;slug-hash=RNKeMaK\/d47d68b7fc433788fad7b12bf51c9021&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RNKeMaK\/d47d68b7fc433788fad7b12bf51c9021\" title=\"CodePen Embed RNKeMaK\/d47d68b7fc433788fad7b12bf51c9021\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you are a bit lost and confused, don\u2019t worry. You were used to considering the &lt;img&gt; element as a simple element that shows an image, but it\u2019s more complex than that. It\u2019s both a container and its content at the same time, with two sizes that can be controlled separately. Not to mention the ability to make its own content overflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If we want to be accurate, an image is a <a href=\"https:\/\/www.w3.org\/TR\/css-display-3\/#replaced-element\">\u201creplaced element\u201d<\/a>. You have surely heard about that strange term without understanding what it means, but with what we saw, it should be clearer.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>replaced element<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An element whose content is outside the scope of the CSS formatting model, such as an image or embedded document. For example, the content of the HTML <code>img<\/code> element is often replaced by the image that its <code>src<\/code> attribute designates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Replaced elements often have natural dimensions. For example, a bitmap image has a natural width and a natural height specified in absolute units (from which the natural ratio can obviously be determined)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The content of replaced elements is not considered in the CSS formatting model; however, their natural dimensions are used in various layout calculations<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Enough theory. Let\u2019s see some cool demos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Show Me The Demos!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a fancy hover effect that places the image inside its frame with a nice transition.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_azpRWrg\/a26ee8da52de814aeb93436fa76c2233\" src=\"\/\/codepen.io\/anon\/embed\/azpRWrg\/a26ee8da52de814aeb93436fa76c2233?height=450&amp;theme-id=1&amp;slug-hash=azpRWrg\/a26ee8da52de814aeb93436fa76c2233&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed azpRWrg\/a26ee8da52de814aeb93436fa76c2233\" title=\"CodePen Embed azpRWrg\/a26ee8da52de814aeb93436fa76c2233\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Another idea with a 3D effect:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bNgmRGa\/c963ce0e5220a6bde1bc159a6009f758\" src=\"\/\/codepen.io\/anon\/embed\/bNgmRGa\/c963ce0e5220a6bde1bc159a6009f758?height=450&amp;theme-id=1&amp;slug-hash=bNgmRGa\/c963ce0e5220a6bde1bc159a6009f758&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bNgmRGa\/c963ce0e5220a6bde1bc159a6009f758\" title=\"CodePen Embed bNgmRGa\/c963ce0e5220a6bde1bc159a6009f758\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Where is the image? Hover to reveal it!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YPNJajx\/368070edaa2554aba619f01063f693b3\" src=\"\/\/codepen.io\/anon\/embed\/YPNJajx\/368070edaa2554aba619f01063f693b3?height=450&amp;theme-id=1&amp;slug-hash=YPNJajx\/368070edaa2554aba619f01063f693b3&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YPNJajx\/368070edaa2554aba619f01063f693b3\" title=\"CodePen Embed YPNJajx\/368070edaa2554aba619f01063f693b3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">An effect that we can combine with <code>@starting-style<\/code> to create a nice entry animation:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEgVRZm\/a81941bf684b029565d60113dec14867\" src=\"\/\/codepen.io\/anon\/embed\/preview\/vEgVRZm\/a81941bf684b029565d60113dec14867?height=450&amp;theme-id=1&amp;slug-hash=vEgVRZm\/a81941bf684b029565d60113dec14867&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEgVRZm\/a81941bf684b029565d60113dec14867\" title=\"CodePen Embed vEgVRZm\/a81941bf684b029565d60113dec14867\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">And why not that famous screen loader with a single image element:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogBawYL\/62b246744b659e974593f845bc71e6ef\" src=\"\/\/codepen.io\/anon\/embed\/ogBawYL\/62b246744b659e974593f845bc71e6ef?height=450&amp;theme-id=1&amp;slug-hash=ogBawYL\/62b246744b659e974593f845bc71e6ef&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogBawYL\/62b246744b659e974593f845bc71e6ef\" title=\"CodePen Embed ogBawYL\/62b246744b659e974593f845bc71e6ef\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You make sure the intrinsic dimension of the image is smaller than the CSS dimension, you set <code>object-fit: none<\/code>, then you animate <code>object-position<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">object-fit<\/span>: none;\n  <span class=\"hljs-attribute\">object-position<\/span>: <span class=\"hljs-number\">0%<\/span> <span class=\"hljs-number\">0%<\/span>;  \n  <span class=\"hljs-attribute\">animation<\/span>: \n    x <span class=\"hljs-number\">2.1s<\/span> infinite linear alternate,\n    y <span class=\"hljs-number\">3.3s<\/span> infinite linear alternate;\n  <span class=\"hljs-attribute\">animation-composition<\/span>: add;\n}\n<span class=\"hljs-keyword\">@keyframes<\/span> x {\n  <span class=\"hljs-selector-tag\">to<\/span> {<span class=\"hljs-attribute\">object-position<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-number\">0<\/span>}\n}\n<span class=\"hljs-keyword\">@keyframes<\/span> y {\n  <span class=\"hljs-selector-tag\">to<\/span> {<span class=\"hljs-attribute\">object-position<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">100%<\/span>}\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The <code>animation-composition: add<\/code> allows me to animate each axis individually and have an additive effect of both. You can learn more about it here: \u201c<a href=\"https:\/\/master.dev\/blog\/how-to-control-infinite-css-animations-part-1-of-2\/\">How to Control Infinite CSS Animations<\/a>\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s end with some fancy decoration <a href=\"https:\/\/master.dev\/blog\/drawing-css-shapes-using-corner-shape\/\">powered by <code>corner-shape<\/code><\/a> (Chrome-only for now).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbRazPP\/a860b39eef5664de9bb031ca258e231c\" src=\"\/\/codepen.io\/anon\/embed\/WbRazPP\/a860b39eef5664de9bb031ca258e231c?height=450&amp;theme-id=1&amp;slug-hash=WbRazPP\/a860b39eef5664de9bb031ca258e231c&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbRazPP\/a860b39eef5664de9bb031ca258e231c\" title=\"CodePen Embed WbRazPP\/a860b39eef5664de9bb031ca258e231c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Worth noting that all the demos can be created with common techniques that are more intuitive. I am not here to push to use those obscure techniques, but the main advantage is that I don&#8217;t have to rely on additional elements or pseudo-elements. If you are in a situation where you cannot control the HTML structure, then those tricks can be handy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Do you still think the image is a simple element? Even old, well-known stuff can hide strange mechanisms we can turn into fancy CSS tricks. Now go impress your colleagues and friends with this: \u201cHey, do you know that an image can overflow itself? Let me show you!\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Want a last trick before we end? Check this: <a href=\"https:\/\/css-tip.com\/broken-image\/\">How to style a broken image<\/a>. It\u2019s probably another feature you don\u2019t know about images!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You normally don&#8217;t think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually&#8230;<\/p>\n","protected":false},"author":12,"featured_media":10593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[7,31,133,202],"class_list":["post-10580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-html","tag-images","tag-overflow"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/overflow.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10580"}],"version-history":[{"count":9,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10580\/revisions"}],"predecessor-version":[{"id":10599,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10580\/revisions\/10599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10593"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}