Skip to main content

Fancy frame for your image with hover effect

Add a nice frame around your image with a cool hover effect

CSS only frame with hover effect around an image

@property --s {
syntax: "<length>";
initial-value: 0px;
inherits: true;

img {
--t: 3px; /* control the thickness (corner = 3*edge) */
--s: 40px; /* control the size of the corners (that also affect the size of the edges) */
--g: 8px; /* control the gap */
--c: #755C3B;

padding: calc(2*var(--t) + var(--g));
border: var(--t) solid #0000;
conic-gradient(at var(--s) calc(3*var(--t)),#0000 75%,var(--c) 0)
0 0/calc(100% - var(--s)) calc(100% - 3*var(--t)) border-box,
conic-gradient(at calc(3*var(--t)) var(--s),#0000 75%,var(--c) 0)
0 0/calc(100% - 3*var(--t)) calc(100% - var(--s)) border-box,
linear-gradient( 0deg,var(--c) calc(2*var(--t)),#0000 0)
50% var(--t)/calc(100% - 2*(var(--s) + var(--g))) 100%
repeat-y padding-box,
linear-gradient(-90deg,var(--c) calc(2*var(--t)),#0000 0)
var(--t) 50%/100% calc(100% - 2*(var(--s) + var(--g)))
repeat-x padding-box;
transition: --s .5s;
img:hover {
--s: 80px;

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