<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.