Modern CSS Clip-path Effects
Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Hexagon Scale
Crops avatars or product shots to a hexagon that grows and tilts slightly on hover. Class: fx-hexagon-scale
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="../assets/img/avatar-3.svg" alt="Team member in a hexagon" class="fx-hexagon-scale object-fit-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-fit-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-fit-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; }
}2Slide Reveal
Wipes an image or banner in from the left, holds it, then wipes it out to the right. Class: fx-slide-reveal
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1762968274962-20c12e6e8ecd?auto=format&fit=crop&w=1200&h=800&q=70" alt="Banner image sliding into view" class="fx-slide-reveal object-fit-cover" style="width:220px;height:150px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-slide-reveal { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation: fx-slide-reveal-wipe 5s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes fx-slide-reveal-wipe {
0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
25%, 75% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
100% { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
.fx-slide-reveal, .fx-slide-reveal::before, .fx-slide-reveal::after, .fx-slide-reveal *, .fx-slide-reveal *::before, .fx-slide-reveal *::after { animation: none !important; transition: none !important; }
}3Shape Shifter
A twelve-corner circle that snaps into a plus sign on hover - handy for add buttons and icons. Class: fx-shape-shifter
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="fx-shape-shifter border-0" style="width:110px;height:110px" aria-label="Add item"></button>
<img src="https://images.unsplash.com/photo-1769755409781-9e8924c57362?auto=format&fit=crop&w=800&h=800&q=70" alt="Picture that changes shape" class="fx-shape-shifter object-fit-cover" style="width:120px;height:120px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-shape-shifter {
-webkit-clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%); clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%);
transition: clip-path .5s cubic-bezier(.68, -.4, .27, 1.4), transform .5s;
background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
}
.fx-shape-shifter:hover, .fx-shape-shifter:focus-visible { -webkit-clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
.fx-shape-shifter, .fx-shape-shifter::before, .fx-shape-shifter::after, .fx-shape-shifter *, .fx-shape-shifter *::before, .fx-shape-shifter *::after { animation: none !important; transition: none !important; }
}