Skip to main content
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.