在懸停時淡化背景圖像以顯示背景顏色？

Question

在懸停時，是否可以淡化背景圖像不透明度以顯示更多背景色？

本質上，我希望背景顏色是黑色的，所以當圖像被徘徊時，它看起來像變暗了。

這是它是如何設置：

<a href="#" class="new-cinema" style="background-image:url('images/promo-1.jpg');"> 
    <span class="main-title">New<br />Cinema<br />Openings</span> 
</a> 

通過使用類似下面的，它只是褪色的圖像：

opacity: 0.75; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 

Answer 1

您可以通過向DOM物理圖像和減少對懸停圖像的不透明度做。你並不需要一個jQuery，但純CSS的解決方案是在這裏：

a {position: relative; overflow: hidden; background: #000; display: inline-block;} 
 
a img {position: absolute; left: 0; top: 0;} 
 
a img, a:hover img {transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;} 
 
a:hover img {opacity: 0.5;}

<a href="#" class="new-cinema"> 
 
    <img src="http://lorempixel.com/400/200/" /> 
 
    <span class="main-title">New<br />Cinema<br />Openings</span> 
 
</a>

Answer 2

嘗試用插圖box-shadow這樣做。如果這是性能問題，請糾正我。

a { 
    box-shadow: inset 0px 0px 0px 100px rgba(255, 255, 255, 0); 
    transition: box-shadow .25s ease-in-out; 
} 
    a:hover { 
    box-shadow: inset 0px 0px 0px 100px rgba(0, 0, 0, 0.8); 
    } 

的jsfiddle：https://jsfiddle.net/q5osfcg2/

Answer 3

您可以用僞元素做到這一點，留在CSS樣式，而不是圖像在HTML中。

.new-cinema { 
 
    display: inline-block; 
 
    margin: 25px; 
 
    border: 1px solid green; 
 
    text-align: center; 
 
    background: black; 
 
    font-weight: bold; 
 
    color: red; 
 
    padding: .5em; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
.new-cinema:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://lorempixel.com/200/200/sports/); 
 
    background: cover; 
 
    transition: opacity 0.5s ease; 
 
} 
 
.new-cinema:hover:after { 
 
    opacity: 0.5; 
 
} 
 
.main-title { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<a href="#" class="new-cinema"> 
 
    <span class="main-title">New<br />Cinema<br />Openings</span> 
 
</a>