<img src="https://picsum.photos/id/102/250/250" alt="Raspberries">
<img src="https://picsum.photos/id/1080/250/250" style="--s: -1;--b:8px;--d:25px;" alt="Strawberries">
img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/
  
  --_d: calc(var(--d) + var(--s)*1em);
  --_g: calc(100% - 2*(var(--_d) + var(--b)));
  --_m:
    conic-gradient(from 90deg at var(--_d) var(--_d),#0000 25%,#000 0)
     0 0/calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50%/var(--_g) var(--_g) no-repeat;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  font-size: 0;
  cursor: pointer;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  grid-gap: 25px;
  background: repeating-linear-gradient(135deg,#A7DBD8 0 20px,#79BD9A 0 40px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.