leaflet.pub
a tool for shared writing and social publishing
try mask-image css
awarm.space
+4
-17
app/globals.css
+4
-17
app/globals.css
···
531
.footnote-side-item {
532
max-height: 4.5em;
533
overflow: hidden;
534
-
transition: max-height 200ms ease;
535
}
536
-
.footnote-side-item.has-overflow::after {
537
-
content: "";
538
-
position: absolute;
539
-
bottom: 0;
540
-
left: 0;
541
-
right: 0;
542
-
height: 1.5em;
543
-
background: linear-gradient(to bottom, transparent, rgb(var(--bg-page)));
544
-
pointer-events: none;
545
-
opacity: 1;
546
-
transition: opacity 200ms ease;
547
}
548
.footnote-side-item:hover,
549
.footnote-side-item:focus-within,
550
.footnote-side-item.footnote-side-focused {
551
max-height: 40em;
552
-
}
553
-
.footnote-side-item:hover::after,
554
-
.footnote-side-item:focus-within::after,
555
-
.footnote-side-item.footnote-side-focused::after {
556
-
opacity: 0;
557
}
···
531
.footnote-side-item {
532
max-height: 4.5em;
533
overflow: hidden;
534
+
transition: max-height 200ms ease, mask-image 200ms ease;
535
}
536
+
.footnote-side-item.has-overflow {
537
+
mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
538
}
539
.footnote-side-item:hover,
540
.footnote-side-item:focus-within,
541
.footnote-side-item.footnote-side-focused {
542
max-height: 40em;
543
+
mask-image: none;
544
}