Gallery of Skewed Images with Hover Effect

December 02, 2025

Another classic component made easy with modern CSS and the new corner-shape. A gallery of skewed images with a reveal effect on hover using a few lines of code. The skewing adjusts accordingly to the direction of the text. Another direction-aware shape!

CSS-only gallery of skewed images

.gallery { --s: 50px;  display: flex; gap: 10px;}.gallery > img { flex: 1; border-start-start-radius: var(--s) 100%; border-end-end-radius: var(--s) 100%; margin-inline-end: calc(-1*var(--s)); corner-shape: bevel; transition: .3s linear;}.gallery > img:hover { flex: 1.6;}.gallery > img:is(:first-child,:hover),.gallery > img:hover + * { border-start-start-radius: 0 100%;}.gallery > img:is(:last-child,:hover),.gallery > img:has(+ :hover) { border-end-end-radius: 0 100%; margin-inline-end: 0;}

Another implementation using clip-path with better, support but not direction-aware.

Direction-Aware Arrow Shape using corner-shape Combining corner-shape and logical properties to create direction-aware shapes.. November 25, 2025
Dynamic Tooltip Position with Anchor Positioning IV A tooltip with a stretchy arrow that follows its anchor. November 20, 2025