对帖子的反向悬停效果

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 。