jquery - 悬停时淡化背景图像以显示背景颜色？

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>