A fancy hover effect using outline
Add a cool hover effect to your images using a few lines of code
- No extra element (only the
<img>
tag) - No pseudo element
- Using only the outline property
- Optimized with CSS variables
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.