Javascript div上的不透明度颜色覆盖

我有三个这样的分区，彼此相邻：

HTML如下所示：

<div class="row">

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <img src="images/image1.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 1</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <div class="overlay"></div>
        <img src="images/image2.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="overlay"></div>
    <div class="reserved__inner">
        <img src="images/image3.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

当您将鼠标悬停在此处时，您会看到：

但现在，我还想有一个覆盖在图像上，当你悬停在它。像这样：

我的CSS当前看起来像这样：

<div class="row">

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <img src="images/image1.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 1</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <div class="overlay"></div>
        <img src="images/image2.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="overlay"></div>
    <div class="reserved__inner">
        <img src="images/image3.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

---

但我真的被困在如何创建颜色叠加上了。有人能帮我吗？

你可以很容易地做到这一点，只要换一种思路

只需在

.reserved_inner

类中添加背景色，然后降低图像本身的不透明度

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
     background: #a00; /* add a background color here */
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
     opacity: .5; /* Lower the image opacity here */
}

$（'.reserved\u inner'）。打开({
mouseenter:function（）{
$（this.find（'h3'）.addClass（'black'）；
$（this.find（'p'）.show（）；
$（this.find（'a'）.show（）；
$（this.children（'img'）.css（{opacity:'.3'}）；/*更改图像不透明度*/
},
mouseleave:function（）{
$（this.find（'h3'）.removeClass（'black'）；
$（this.find（'p'）.hide（）；
$（this.find（'a'）.hide（）；
$（this.children（'img'）.css（{opacity:'.5'}）；/*更改图像不透明度*/
}
});
。保留内部{
宽度：100%；
最小高度：380px；
位置：相对位置；
溢出：隐藏；
背景：#a00；/*在此处添加背景色*/
}
.保留的内部图像{
最小高度：100%；
高度：自动！重要；
最小宽度：100%；
宽度：自动！重要；
位置：绝对位置；
顶部：-9999px；
底部：-9999px；
左：-9999px；
右：-9999px；
保证金：自动；
不透明度：.5；/*在此处降低图像不透明度*/
}
.保留文本{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
填充：56px 54px 50px 58px；
/*光标：指针*/
}
.保留文本h3{
边缘底部：12px；
线高：35px；
}
.保留文本h3 sup{
字体大小：10px；
}
.保留文本h3.首先{
颜色：#fff；
}
.保留的\uuu文本p{
线高：24px；
边缘底部：14px；
}

乱数假文
同侧文字

乱数假文
同侧文字

乱数假文
同侧文字

只需使用CSS即可。
使用
背景图像：url（“您的url”）从
img
切换到
div
然后播放伪元素

工作


#img{
宽度：400px；
高度：400px；
背景图片：url(http://lorempixel.com/400/400);
位置：相对位置；
}
#img：之后{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：透明；
过渡：所有0.5秒到0秒；
}
#img：悬停：之后{
背景：rgba（255,255,0,0.5）；
}
#img：悬停>跨距{
颜色：红色；
}

我的文字