Hab ich jetzt mit folgendem Code ein bisschen abgedunkelt und gleichzeitig einen GLOW Effekt um die Kategorie Bilder gelegt
CSS
.wbbBoardNodeContainer__header[data-container-image="true"] {
position: relative;
overflow: hidden;
box-shadow:
0 0 12px rgba(0, 210, 220, 0.55),
0 0 28px rgba(0, 210, 220, 0.35);
}
/* Abdunkelnder Verlauf */
.wbbBoardNodeContainer__header[data-container-image="true"]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.55) 50%,
rgba(0, 0, 0, 0.25) 100%
);
z-index: 1;
pointer-events: none;
}
/* Glow-Rahmen */
.wbbBoardNodeContainer__header[data-container-image="true"]::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(0, 230, 240, 0.65);
box-shadow:
inset 0 0 18px rgba(0, 230, 240, 0.35),
0 0 18px rgba(0, 230, 240, 0.45);
z-index: 3;
pointer-events: none;
}
/* Inhalt über Overlay */
.wbbBoardNodeContainer__headline,
.wbbBoardNodeContainer__description,
.wbbBoardNodeContainer__collapsibleButton {
position: relative;
z-index: 4;
}
.wbbBoardNodeContainer__title,
.wbbBoardNodeContainer__title a,
.wbbBoardNodeContainer__link {
color: #fff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.wbbBoardNodeContainer__description {
color: #fff !important;
text-shadow: 0 2px 7px rgba(0, 0, 0, 0.95);
}