<img src="https://picsum.photos/id/64/300/300" alt="A random woman">
<img src="https://picsum.photos/id/375/300/300" alt="A random man" style="--c:#83AF9B">
img {
--c: #F9CDAD; /* the main color */
--b: 8px; /* thickness of the border */
--o: 25px; /* control the offset */
width: 200px; /* the image size */
--_p: calc(2*var(--o) + var(--b));
padding: var(--_p) var(--_p) 0 0;
outline: var(--b) solid var(--c);
outline-offset: calc(var(--o) - var(--_p));
transition: .4s;
cursor: pointer;
}
/* change the padding to get all the combination
two consecutive padding equal to --_p and the others 0
*/
img + img {
padding: var(--_p) 0 0 var(--_p);
}
img:hover {
padding: calc(var(--_p)/2);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
grid-auto-columns: 300px;
background: #547980;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.