The latest articles on Forem by parthik rajput (@parthik_rajput_19028ea13d). https://forem.com/parthik_rajput_19028ea13d https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3308348%2F72a17df0-38e9-4c61-9bf4-25b34a19e508.png https://forem.com/parthik_rajput_19028ea13d en parthik rajput Wed, 31 Dec 2025 09:26:13 +0000 https://forem.com/parthik_rajput_19028ea13d/split-and-assemble-an-image-using-css-mask-4751 https://forem.com/parthik_rajput_19028ea13d/split-and-assemble-an-image-using-css-mask-4751 <p>Check out this Pen I made!</p> <p> <iframe height="600" src="https://codepen.io/parthik-rajput-the-decoder/embed/MYeaYmp?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <p>Split an image into pieces using the mask property, then show it fully on hover. A single-element implementation using less than 10 CSS declarations.</p> <p>img {<br> --g: 15px; /* control the gap */</p> <p>width: 280px;<br> aspect-ratio: 1;<br> box-sizing: border-box;<br> --_g: var(--g)/calc(50% - var(--g)) calc(50% - var(--g)) <br> no-repeat conic-gradient(#000 0 0);<br> mask: <br> left var(--_i,) top var(--_g),<br> bottom var(--_i,) left var(--_g),<br> top var(--_i,) right var(--_g),<br> right var(--_i,) bottom var(--_g);<br> transition: .3s linear;<br> }<br> img:hover {<br> --_i: var(--g);<br> padding: var(--g);<br> }</p> codepen