css - 对帖子的反向悬停效果

Question

我正在使用 WordPress 构建网站，我使用的主题在后期效果上悬停。我想反转它，这样发布的图像在悬停之前会更暗，并且鼠标放在上面会是全彩色。

网站:http://fotozakatek.com

我不太熟悉 CSS，但这可能是正确的代码:

.posts { margin-top: -3.95%; }

.posts .post {
    display: block;
    background-color: #ffffff;
    width: 30.7%;
    margin-top: 3.95%;
    padding-bottom: 30.7%;
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;

}

.posts .post + .post { margin-left: 3.95%; }
.posts .post:nth-child(3n+1) { margin-left: 0; }

.post-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.archive-post-overlay {
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.sticky .post-overlay > p {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 0.875em;
    text-transform: uppercase;
    color: #999;
}

.sticky .post-overlay > p span {
    margin-right: 9px;
    font-size: 18px;
    position: relative;
    bottom: -1px;
}

.archive-post-header {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
}

.archive-post-title {
    font-size: 1.375em;
    line-height: 120%;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    word-break: break-word;
    -ms-word-break: break-word;
}

.archive-post-date {
    margin-bottom: 5px;
    font-size: 0.875em;
    color: #999;
    text-transform: uppercase;
}

.post:hover .post-overlay { opacity: 1; }
.post:hover .archive-post-title { color: #3bc492; }

Answer 1

您有一个隐藏的叠加层 (opacity: 0)，然后在 :hover 上，叠加层显示 (opacity: 1) .您想要反转这些，以便叠加层在默认情况下可见，并在悬停时隐藏。

这些变化在 style.css 中

• ~ 第 604 行，在 .post-overlay 中移除 opacity: 0.5
• ~ 第 669 行，在 .has-post-thumbnail .post-overlay 中删除 opacity: 0
• ~ 第 664 行，在 .post:hover .post-overlay 中将 opacity: 1 更改为 opacity: 0。