See the Pen by Temani Afif () on .
The code of this effect is similar to the previous one. Optimized with CSS variables to make it easy to control without changing the main code or digging into complex calculations
img {
--color: #FA6900; /* the color of the border */
--border: 10px; /* the thickness of the border */
--offset: 30px; /* control the movement of the border */
--gap: 5px; /* the gap on hover */
border-radius: 50%;
cursor: pointer;
padding: calc(var(--border) + var(--gap));
border: var(--offset) solid #0000;
--_m: radial-gradient(50% 50%, #000 calc(100% - var(--offset)),#0000 calc(100% - var(--border)));
-webkit-mask: var(--_m);
mask: var(--_m);
--_g: #0000 calc(99% - var(--border)), var(--color) calc(100% - var(--border)) 99%,#0000;
--_s: var(--offset);
--_r: 100% 100% at;
background:
radial-gradient(var(--_r) 0 0 ,var(--_g)) calc(100% + var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 100% 0 ,var(--_g)) calc(0% - var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 0 100%,var(--_g)) calc(100% + var(--_s)) calc(0% - var(--_s)),
radial-gradient(var(--_r) 100% 100%,var(--_g)) calc(0% - var(--_s)) calc(0% - var(--_s));
background-size: 50% 50%;
background-repeat: no-repeat;
transition: .4s;
}
img:hover {
--_s: 0px
}
I am using the same technique: padding, and a few gradients for the frame. I am also adding a transparent border to create more space. You may ask “why not use only padding for this task?”. I am using both padding and border because this will make some of the internal calculations easy but the main idea remains the same. A transparent border or padding will both define the area where I will draw with gradients
I am also using masking to create the fading effect. To better understand what’s happening, here is a demo without the mask.