<img src="https://picsum.photos/id/1022/200/200" >
<img src="https://picsum.photos/id/1015/200/200" style="--color:#4ECDC4">
<img src="https://picsum.photos/id/1016/200/200" style="--color:#FF6B6B">
img {
--color: #8A9B0F; /* the border color */
--border: 10px; /* the border thickness*/
--offset: 20px; /* control the offset*/
--gap: 5px; /* the gap on hover */
--_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),var(--color) 0;
--_o: calc(3*var(--offset));
padding:
calc(var(--gap) + var(--border))
calc(var(--gap) + var(--border) + var(--offset))
calc(var(--gap) + var(--border) + var(--offset))
calc(var(--gap) + var(--border));
background:
linear-gradient( var(--_c)) var(--_o) var(--_o),
linear-gradient(90deg,var(--_c)) var(--_o) var(--_o);
background-size: calc(100% - var(--_o)) calc(100% - var(--_o));
background-repeat: no-repeat;
filter: grayscale(.4);
transition: .5s;
cursor: pointer;
}
img:hover {
background-position: 0px 0px;
background-size: calc(100% - var(--offset)) calc(100% - var(--offset));
filter: grayscale(0);
}
body {
background: #e8e9ba;
display: grid;
gap: 40px;
height: 100vh;
margin: 0;
grid-auto-flow: column;
place-content: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.