with a background-image directly.
*
* @package junctionfinds
*/
/* ==========================================================================
MASK 1 — VIGNETTE
Type: mask-image (gradient, soft edges)
Effect: Soft radial fade from sharp center outward to transparent edges.
The image is fully visible in the center, gently dissolving at
the perimeter. Premium and cinematic — used on luxury editorial
product photography backdrops.
Best on: Hero images, full-bleed banners, editorial hero sections
========================================================================== */
.jf-mask-vignette {
-webkit-mask-image: radial-gradient(
ellipse 80% 80% at 50% 50%,
#000 45%,
rgba(0, 0, 0, 0.85) 58%,
rgba(0, 0, 0, 0.55) 72%,
rgba(0, 0, 0, 0.20) 85%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 80% 80% at 50% 50%,
#000 45%,
rgba(0, 0, 0, 0.85) 58%,
rgba(0, 0, 0, 0.55) 72%,
rgba(0, 0, 0, 0.20) 85%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* ==========================================================================
MASK 2 — FADE BOTTOM
Type: mask-image (gradient, soft edges)
Effect: Image is fully opaque at top, fades to transparent at the bottom
over the final 35% of its height. Ideal for hero sections where
the image dissolves into a text area or a solid background color
below it — eliminates the hard crop line.
Best on: Hero images, category header banners, blog hero images
========================================================================== */
.jf-mask-fade-bottom {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 50%,
rgba(0, 0, 0, 0.90) 62%,
rgba(0, 0, 0, 0.65) 72%,
rgba(0, 0, 0, 0.30) 84%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 50%,
rgba(0, 0, 0, 0.90) 62%,
rgba(0, 0, 0, 0.65) 72%,
rgba(0, 0, 0, 0.30) 84%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* ==========================================================================
MASK 3 — DIAGONAL SLICE
Type: clip-path (hard edge)
Effect: A bold parallelogram cut — the image is clipped by two diagonal
lines, one entering from the top-left and one exiting at the
bottom-right. Creates a double-angled editorial shape with roughly
an 8% offset at each corner, giving it a strong dynamic motion
rather than a flat rhombus. Magazine-cover energy.
Best on: Featured collection banners, editorial hero split-layouts,
category cards on a white background
========================================================================== */
.jf-mask-diagonal-slice {
clip-path: polygon(
8% 0%, /* top edge, inset from left */
100% 0%, /* top-right corner */
92% 100%, /* bottom edge, inset from right */
0% 100% /* bottom-left corner */
);
}
/* ==========================================================================
MASK 4 — ORGANIC WAVE
Type: clip-path (hard edge)
Effect: Five full scalloped curves across the bottom edge, creating a
flowing coastline silhouette. Uses 18 polygon points to simulate
sinusoidal wave crests and troughs with a consistent ~14% amplitude.
The top and sides are clean rectangles — only the bottom edge waves.
Looks organic and handcrafted without distorting the image subject.
Best on: Category cards, banner images, section dividers with images
========================================================================== */
.jf-mask-organic-wave {
clip-path: polygon(
/* Top edge — clean straight line */
0% 0%,
100% 0%,
/* Right side straight down to wave start */
100% 80%,
/* Wave crests and troughs, left to right, bottom edge */
/* Each wave covers 20% of the width; amplitude ±10% vertical */
100% 80%,
90% 92%, /* trough 1 */
80% 80%, /* crest 1 */
70% 92%, /* trough 2 */
60% 80%, /* crest 2 */
50% 92%, /* trough 3 */
40% 80%, /* crest 3 */
30% 92%, /* trough 4 */
20% 80%, /* crest 4 */
10% 92%, /* trough 5 */
0% 80%, /* returns to left side wave-start height */
/* Left side back up */
0% 0%
);
}
/* ==========================================================================
MASK 5 — INK BLOB
Type: clip-path (hard edge)
Effect: A genuine fluid, asymmetric blob with 18 polygon points. Each
point is independently placed to break any axis of symmetry, giving
it the feel of an ink splash or watercolor puddle. The shape fills
roughly 85-95% of the element on all sides, never touching the edge,
creating natural "breathing room" around the perimeter.
Distinct from the old basic 'blob' — no 2 adjacent points share an
axis, preventing regular hexagonal approximation.
Best on: Product cards, category cards, decorative image thumbnails
========================================================================== */
.jf-mask-ink-blob {
clip-path: polygon(
/* Starting upper-left zone, moving clockwise */
22% 2%, /* top — slightly left of center */
38% 0%, /* top — nudge right, touches very top */
54% 3%, /* top — right of center, slight dip */
70% 1%, /* top-right — nearly at top */
85% 8%, /* upper right shoulder, curving down */
96% 20%, /* right side, upper */
99% 36%, /* right edge — upper-mid */
97% 54%, /* right side — mid */
93% 68%, /* right side — lower-mid, slight inward pull */
88% 80%, /* lower-right zone */
78% 91%, /* bottom-right, curving inward */
62% 97%, /* bottom — right of center */
46% 99%, /* bottom — just left of center, lowest point */
30% 95%, /* bottom-left */
16% 88%, /* lower-left, rounding up */
5% 74%, /* left side — lower */
1% 57%, /* left edge — mid */
3% 40%, /* left side — upper-mid */
8% 24%, /* upper-left shoulder */
14% 11% /* top-left, closing back to start */
);
}
/* ==========================================================================
MASK 6 — TORN PAPER
Type: clip-path (hard edge)
Effect: Simulates a rough, torn paper edge across the bottom of the image.
Uses 32 polygon points along the bottom edge to create jagged,
irregular teeth of varying width and height — no two teeth are the
same height, mimicking real torn fibres. The top and sides are clean.
The tear's amplitude ranges from 6% to 18% vertical variation.
Best on: Hero images, blog article banners, promotional banners where the
image transitions to a contrasting content section below
========================================================================== */
.jf-mask-torn-paper {
clip-path: polygon(
/* Clean top edge */
0% 0%,
100% 0%,
/* Right side */
100% 78%,
/* Torn bottom edge — 32 jagged points right to left */
/* Irregular teeth with varying heights to look genuinely torn */
97% 88%,
94% 80%,
91% 90%,
88% 82%,
85% 92%,
82% 83%,
79% 91%,
76% 79%,
73% 88%,
70% 81%,
67% 93%,
64% 84%,
61% 90%,
58% 78%,
55% 89%,
52% 82%,
49% 94%,
46% 83%,
43% 90%,
40% 80%,
37% 92%,
34% 82%,
31% 88%,
28% 79%,
25% 91%,
22% 83%,
19% 89%,
16% 80%,
13% 93%,
10% 82%,
7% 90%,
4% 81%,
0% 86%,
/* Left side back up */
0% 0%
);
}
/* ==========================================================================
MASK 7 — PAINT STROKE
Type: clip-path (hard edge)
Effect: The silhouette of a wide, horizontal paint brush stroke. Wide and
full in the center (reaching 100% width and nearly full height),
tapering to narrow pointed tips at both the left and right ends —
like a single broad brushstroke left by a flat filbert brush.
18 points define the upper and lower arcs of the stroke body,
with the left and right tips meeting at roughly the vertical midpoint.
Best on: Hero images, full-width promotional banners, section feature images
========================================================================== */
.jf-mask-paint-stroke {
clip-path: polygon(
/* Left tip */
0% 50%,
/* Upper arc — left to right */
4% 38%,
10% 26%,
20% 16%,
32% 9%,
45% 5%,
55% 4%,
68% 6%,
80% 12%,
90% 22%,
96% 34%,
100% 48%,
/* Right tip */
100% 52%,
/* Lower arc — right to left */
96% 66%,
90% 78%,
80% 87%,
68% 93%,
55% 96%,
45% 95%,
32% 91%,
20% 84%,
10% 74%,
4% 62%,
0% 50%
);
}
/* ==========================================================================
MASK 8 — ARCH
Type: clip-path (hard edge)
Effect: A classic monumental arch shape — perfectly straight vertical sides,
a flat bottom edge, and a precise semicircular arch at the top.
The arch is approximated with 20 polygon points on the curved top
for maximum smoothness without using path(). The curve spans from
10% to 90% horizontally, rising to 0% at its apex (50% center).
A genuinely architectural and elegant shape.
Best on: Product cards, category cards, portrait-orientation hero images,
decorative section imagery
========================================================================== */
.jf-mask-arch {
clip-path: polygon(
/* Bottom-left corner */
0% 100%,
/* Left side — straight vertical */
0% 52%,
/* Arch curve — left foot to apex to right foot, 20 points */
/* Each point sits on a true semicircle: x = 50 + 40*cos(θ), y = 52 - 52*sin(θ) */
/* Approximated with 20 evenly-spaced angular steps */
10% 52%, /* 180° — left arch foot */
10% 46%,
11% 39%,
13% 31%,
17% 24%,
22% 17%,
28% 11%,
34% 6%,
41% 2%,
50% 0%, /* 90° — apex */
59% 2%,
66% 6%,
72% 11%,
78% 17%,
83% 24%,
87% 31%,
89% 39%,
90% 46%,
90% 52%, /* 0° — right arch foot */
/* Right side — straight vertical */
100% 52%,
100% 100% /* Bottom-right corner */
);
}
/* ==========================================================================
RESPONSIVE BEHAVIOR NOTES
========================================================================== */
/*
* clip-path masks (diagonal-slice, organic-wave, ink-blob, torn-paper,
* paint-stroke, arch) scale automatically with the element because all
* coordinates are expressed in percentages. No media queries needed.
*
* mask-image masks (vignette, fade-bottom) use radial/linear gradients
* with mask-size: 100% 100%, so they also scale automatically.
*
* On mobile you may want to disable certain masks that distort the
* image subject too heavily at small sizes. Use a utility class:
*/
@media (max-width: 767px) {
/*
* .jf-mask-mobile-off — apply this alongside a mask class to
* remove the mask entirely on mobile, preserving the full image.
*/
.jf-mask-mobile-off {
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* ==========================================================================
INTERACTION — HOVER SCALE (optional utility)
========================================================================== */
/*
* .jf-mask-hover — optional modifier for product cards and category cards.
* Wraps the mask in a containing element that scales the inner image on
* hover, creating a zoom effect that stays within the mask boundary.
*
* Usage:
*
*
*
* The scale transform on hover is applied to a child img or
* background-image wrapper — the mask boundary itself does not move.
*/
.jf-mask-hover {
overflow: hidden; /* Needed for clip-path types only */
transition: transform 0.3s ease;
}
.jf-mask-hover img,
.jf-mask-hover .product-card__image,
.jf-mask-hover .category-card__image {
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.jf-mask-hover:hover img,
.jf-mask-hover:hover .product-card__image,
.jf-mask-hover:hover .category-card__image {
transform: scale(1.06);
}