Hier der Code:
CSS
/* WoltLab Blog Artikel Box */
#content {
.boxContent .blogEntryList {
display: flex;
@include screen-lg {
.contentItemSingleColumn {
flex-basis: calc(100% / 3 - 20px);
}
}
@include screen-sm-md {
.contentItemSingleColumn {
flex-basis: calc(50% - 20px);
}
}
@include screen-xs {
.contentItemSingleColumn {
flex-basis: calc(100% - 20px);
}
}
.contentItemLink {
position: relative;
.contentItemContent {
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: initial;
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
.contentItemTitle {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.contentItemCategory {
color: rgba(255,255,255,0.7);
}
.contentItemTitle {
color: #fff;
}
.contentItemDescription {
color: rgba(255,255,255,0.7);
white-space: nowrap;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-align: left;
/* display: none; */ /* Optional um die Vorschau komplett auszublenden */
> p:first-child {
display: none;
}
> p:last-child {
display: none;
}
}
}
.contentItemImageLarge {
min-height: 175px; /* Höhe des Bildes ändern / Standard 150px */
}
}
.contentItemOptions {
display: none;
}
}
}
Alles anzeigen