<img src="https://assets.codepen.io/1480814/adam-argyle.png" alt="Adam argyle" >
<img src="https://assets.codepen.io/1480814/ahmed.png" alt="Ahmed shadeed" style="--c:#efac27;--cb: #bbdeea">
<img src="https://assets.codepen.io/1480814/kevin-p.png" alt="Kevin Powell" style="--c:#255b98;--cb:#f3bf99">
img {
--s: 200px; /* image size */
--b: 6px; /* border thickness */
--c: #ae3ec9; /* border color */
--cb: #e9ecef; /* background color */
--f: 1; /* initial scale */
width: var(--s);
aspect-ratio: 1;
padding-top: calc(var(--s)/5);
cursor: pointer;
border-radius: 0 0 999px 999px;
--_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
--_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
outline: var(--b) solid var(--c);
outline-offset: var(--_o);
background:
radial-gradient(
circle closest-side,
var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
) var(--_g);
-webkit-mask:
linear-gradient(#000 0 0) no-repeat
50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
transform: scale(var(--f));
transition: .5s;
}
img:hover {
--f: 1.4; /* hover scale */
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
background: #E0E4CC;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.