CSS Tip

A fancy hover effect using outline

Add a cool hover effect to your images using a few lines of code

A fancy hover effect using CSS outline

img {
  --s: 250px;   /* the size of the image */
  --b: 8px;     /* the border thickness*/
  --g: 14px;    /* the gap */
  --c: #4ECDC4; /* the color */
  
  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s)/2) solid #0009;
  outline-offset: calc(var(--s)/-2);
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

See the Pen Frame hover effect with one element by Temani Afif (@t_afif) on CodePen.

More CSS Tips