Skip to main content
CSS Tip

Border reveal animation on hover

Add a simple border around your image with a nice hover effect

animation to reveal a border around the image

@property --p {
syntax: "<percentage>";
initial-value: 0%; /* you can start at 50% for a different effect */
inherits: true;
}

img {
--t: 5px; /* control the thickness */
--s: 40px; /* control the size of the dash */
--g: 8px; /* control the gap */
--c: #68B3AF;

padding:
calc(var(--g) + var(--t)) var(--g)
var(--g) calc(var(--g) + var(--t));
border: solid #0000;
border-width: 0 var(--t) var(--t) 0;
background:
conic-gradient(at var(--p) var(--p), #0000 75%,var(--c) 0)
0 0/var(--s) var(--s) round padding-box border-box;
mask:
conic-gradient(
from 90deg at calc(2*var(--t)) calc(2*var(--t)),
#0000 25%,#000 0) calc(-1*var(--t)) calc(-1*var(--t)),
linear-gradient(#000 0 0) content-box;
transition: --p .6s;
}
img:hover {
--p: 100%;
}

See the Pen Border Reveal on hover by Temani Afif (@t_afif) on CodePen.


More CSS Tips