Skip to main content

Sliding reveal animation for your images

Add a reveal effect to your image with a sliding animation on hover

Sliding reveal animation

img {
--s: 200px; /* the size of the image */

width: var(--s);
aspect-ratio: 1;
box-sizing: border-box;
object-fit: cover;
/* 8px = thickness 13px = gap (5px) + thickness (8px) */
border-image: linear-gradient(#53777A 0 0) 1/8px/13px;
object-position: top;
padding-top: calc(2*var(--s)/3);
transition: .5s;
img:hover {
padding: 0;

See the Pen Sliding reveal hover effect by Temani Afif (@t_afif) on CodePen.