halo-theme-hao/templates/assets/css/related-posts-six.css

69 lines
1.4 KiB
CSS
Raw Normal View History

2024-04-12 06:35:37 +00:00
/* 相关推荐 */
.relatedPosts-list {
display: flex;
flex-wrap: wrap;
}
.relatedPosts>.relatedPosts-list>div {
background: #363636;
transition: 0.3s;
cursor: pointer;
overflow: hidden;
}
.relatedPosts>.relatedPosts-list>div {
position: relative;
display: inline-block;
overflow: hidden;
margin: 3px;
width: calc(33.333% - 6px);
height: 200px;
/* background: var(--heo-main); */
vertical-align: bottom;
}
.relatedPosts>.relatedPosts-list .cover {
width: 100%;
height: 100%;
opacity: 0.4;
transition: all 0.6s ease 0s;
object-fit: cover;
}
.relatedPosts>.relatedPosts-list .content {
position: absolute;
top: 50%;
padding: 0px 1rem;
width: 100%;
transform: translate(0px, -50%);
}
.relatedPosts>.relatedPosts-list .content .date {
color: var(--heo-fontcolor);
}
.relatedPosts>.relatedPosts-list .content .date {
color: var(--light-grey);
font-size: 90%;
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--white);
-webkit-line-clamp: 2;
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--heo-fontcolor);
font-weight: bold;
line-height: 1.5;
-webkit-line-clamp: 4;
font-size: 0.9rem;
text-align: center;
}
.relatedPosts > .relatedPosts-list > div:hover .cover {
opacity: 0.8;
transform: scale(1.1);
}