<img src="https://picsum.photos/id/575/200/200" alt="sky, mountains and sea">
<img src="https://picsum.photos/id/791/200/200" style="--b:3px;--g: 8px;--c: #FFAB07" alt="a lot of hot air balloon">
img {
--b: 6px; /* the border thickness*/
--g: 10px; /* the gap */
--c: #0E8D94;
padding: calc(var(--b) + var(--g));
background:
conic-gradient(from 180deg at calc(100% - var(--b)) var(--b),#0000 25%,var(--c) 0)
200% 0/200% var(--b) no-repeat,
conic-gradient(at var(--b) calc(100% - var(--b)),#0000 25%,var(--c) 0);
--_m:
conic-gradient(at var(--b) calc(100% - var(--b)),#0000 25%,#000 0)
-100% 100%/200% var(--b) no-repeat,
conic-gradient(at var(--b) calc(100% - var(--b)),#000 25%,#0000 0);
-webkit-mask: var(--_m);
mask: var(--_m);
transition:
.3s -webkit-mask-size,
.3s .3s -webkit-mask-position,
.3s .6s background-size,
.3s .9s background-position,
.4s transform;
cursor: pointer;
}
img:hover {
background-position: 100% 0;
background-size: 200% 100%,auto;
-webkit-mask-position: 0% 100%;
-webkit-mask-size: 200% 100%,auto;
transform: scale(1.2);
transition:
.3s .9s -webkit-mask-size,
.3s .6s -webkit-mask-position,
.3s .3s background-size,
.3s background-position,
.4s transform;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-flow: column;
place-content: center;
align-items: center;
gap: 40px;
background: #869f81;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.