Changed radius shape with hover effect

January 29, 2025

Combine with Transferred form of radius With modern CSS to make a trend that reveals animation. Hover over image to reveal text.

• Minimal HTML (the


  Element)

• Is run by @property and css mask
• Optimized by CSS variables

@property --_x {
syntax: "";
inherits: true;
initial-value: 0px; 
}
figure {
--w: 280px; 
--r: .5em;  
display: grid;
place-items: end end;
font: bold 40px/1.5 monospace;
transition: --_x .5s;
}
figure > * {
grid-area: 1/1;
}
figure:hover {
--_x: calc(var(--w) - 3*var(--r) - .5lh);
}
figure img {
width: var(--w);
aspect-ratio: 1;
border-radius: var(--r);
--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 69%,#0000 72%);
--_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
--_d:(.5lh + var(--r));
mask:
calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
100% calc(100% - var(--_d)) var(--_m),
radial-gradient(.5lh at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
calc(-1*var(--r) - var(--_x)) calc(-1*var(--r)),
var(--_g) calc(-1*var(--_d) - var(--_x)) 0,
var(--_g) 0 calc(-1*var(--_d));
mask-repeat: no-repeat; 
}
figure figcaption {
height: 1lh;
width: calc(1lh + var(--_x)); 
box-sizing: border-box;
translate: calc(.5lh - var(--r)) calc(.5lh - var(--r));
overflow: hidden;
border-inline: calc(.5lh - .5ch) solid #0000;
clip-path: inset(5px round 1lh);
}

See the pen
No title By taking afif (@t_afiff) to Codepen.

More CSS Tips