<img src="https://picsum.photos/id/1069/200/200" >
<img src="https://picsum.photos/id/1069/200/200" >
<img src="https://picsum.photos/id/1069/200/200" >
img {
/* I am using a random big value to make sure it works with all image sizes*/
outline: 100vmax solid rgb(0 0 0/var(--_o,50%));
outline-offset: -100vmax;
/* keep only the image area visible */
-webkit-mask: linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0);
cursor: pointer;
transition: outline-color .4s;
}
img:hover {
--_o: 0%;
}
img:nth-child(2) {
border-radius: 50px;
}
img:nth-child(3) {
border-radius: 50%;
}
body {
background: #e8e9ba;
display: grid;
grid-gap: 40px;
height: 100vh;
margin: 0;
grid-auto-flow: column;
place-content: center;
background: pink;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.