Modern CSS Clip-path Effects
Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Circle Reveal
Shows a circular window of an image that opens to the full picture on hover or keyboard focus. Class: fx-circle-reveal
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<a href="#" class="inline-block" aria-label="Open project"><img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" alt="Project cover revealed in a circle" class="fx-circle-reveal object-cover" style="width:220px;height:150px"></a>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-circle-reveal { -webkit-clip-path: circle(36% at 50% 50%); clip-path: circle(36% at 50% 50%); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1); }
.fx-circle-reveal:hover, .fx-circle-reveal:focus-visible, :focus-visible > .fx-circle-reveal { -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%); }
@media (prefers-reduced-motion: reduce) {
.fx-circle-reveal, .fx-circle-reveal::before, .fx-circle-reveal::after, .fx-circle-reveal *, .fx-circle-reveal *::before, .fx-circle-reveal *::after { animation: none !important; transition: none !important; }
}2Hexagon Scale
Crops avatars or product shots to a hexagon that grows and tilts slightly on hover. Class: fx-hexagon-scale
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<img src="../assets/img/avatar-3.svg" alt="Team member in a hexagon" class="fx-hexagon-scale object-cover" style="width:80px;height:80px"><img src="../assets/img/avatar-7.svg" alt="Second team member in a hexagon" class="fx-hexagon-scale object-cover" style="width:80px;height:80px"><img src="../assets/img/avatar-9.svg" alt="Third team member in a hexagon" class="fx-hexagon-scale object-cover" style="width:80px;height:80px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-hexagon-scale {
-webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .45s;
}
.fx-hexagon-scale:hover { transform: scale(1.1) rotate(4deg); filter: saturate(1.3); }
@media (prefers-reduced-motion: reduce) {
.fx-hexagon-scale, .fx-hexagon-scale::before, .fx-hexagon-scale::after, .fx-hexagon-scale *, .fx-hexagon-scale *::before, .fx-hexagon-scale *::after { animation: none !important; transition: none !important; }
}