ポストへの逆ホバリング効果

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

あなたは、その後:hoverに、隠されているオーバーレイ（opacity: 0）を持っていますオーバーレイは（opacity: 1）を示します。オーバーレイがデフォルトで表示され、ホバーで非表示になるようにそれらを逆にしたいとします。

これらの変更は、style.cssに

• である〜線604、.post-overlayに.has-post-thumbnail .post-overlayにopacity: 0に.post:hover .post-overlay変更opacity: 1で、opacity: 0
• 〜ライン664を削除し、opacity: 0.5
• 〜ライン669を削除。