Skip to main content

Overlapping border on images with hover effect

Add an overlapping border to your image with a nice hover effect

images with overlapping border

img {
--c: #F9CDAD; /* the main color */
--b: 8px; /* thickness of the border */
--o: 25px; /* control the offset */

width: 200px; /* the image size */
--_p: calc(2*var(--o) + var(--b));
padding: var(--_p) var(--_p) 0 0;
outline: var(--b) solid var(--c);
outline-offset: calc(var(--o) - var(--_p));
transition: .4s;
img:hover {
padding: calc(var(--_p)/2);

See the Pen Overlapping border on image (with hover effect) by Temani Afif (@t_afif) on CodePen.

More detail: