Увядание фонового изображения при наведении, чтобы выявить цвет фона?

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>