Modern CSS Clip-path Effects
Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Polygon Morph
Morphs an image or block between a hexagon, a square and a diamond using six-point polygons. Class: fx-polygon-morph
<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-1758518729685-f88df7890776?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery picture with a morphing outline" class="fx-polygon-morph object-fit-cover" style="width:160px;height:160px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-polygon-morph {
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
animation: fx-polygon-morph-morph 7s ease-in-out infinite;
}
@keyframes fx-polygon-morph-morph {
0%, 100% { -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
33% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); }
66% { -webkit-clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); }
}
@media (prefers-reduced-motion: reduce) {
.fx-polygon-morph, .fx-polygon-morph::before, .fx-polygon-morph::after, .fx-polygon-morph *, .fx-polygon-morph *::before, .fx-polygon-morph *::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="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; }
}