Css 在悬停状态下添加图像层

我努力了，但找不到解决办法。。。 我需要，只是使用HTML/CSS在鼠标上方的另一个图像上添加一个图像层。 新图层不应替换旧图层，只能求和（因为它是半透明的）

我的问题是：我有多个不同的图像，在鼠标上同一层应该添加到它们

这可能吗

我试过了

<style type="text/css"> 
.image1 
{ 
opacity:1.0; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
}
.image1:hover 
{ 
background: url(http://bridgeditalia.it/wp-content/uploads/2014/07/over.png) no-repeat; 
} </style>

.image1
{ 
不透明度：1.0；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
.image1：悬停
{ 
背景：url(http://bridgeditalia.it/wp-content/uploads/2014/07/over.png)不重复；
} 

---

但不起作用：（

尝试更改悬停上的Z索引并添加一些转换。

这里有一个使用换行div和伪元素的选项

HTML

<div class="img-wrap">
    <img src="http://lorempixel.com/output/sports-q-c-200-200-9.jpg" alt=""/>
</div>
<div class="img-wrap">
    <img src="http://lorempixel.com/output/animals-q-c-200-200-4.jpg" alt=""/>
</div>

---

我们能看到HTML吗？image1是一个或一个链接吗？将你的HTML或链接发布到你的页面中你的链接中没有图像。该参数中不需要双引号吗？嗨，非常感谢你的帮助…但结果并不完全是我所需要的…因为我需要图像位于同一个分区中。下面是一个示例：你的代码和，在是的，我需要的结果（但这是用经典的mouseover html制作的，不太好）如果你一次又一次地使用同一个图像，那么继续将其添加到HTML中是很糟糕的编码。尤其是当它只是用于样式设计时。你需要向我们展示你的HTML和CSS，而不仅仅是提供指向其他人所做的事情的链接。你可以随时更新你的问题。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.img-wrap {
    display: inline-block;
    margin: 25px;
    position: relative;
    }

.img-wrap:after {
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image: url(http://bridgeditalia.it/wp-content/uploads/2014/07/over.png);
    background-size: cover;
    background-repeat: no-repeat;
    opacity:0;
    transition:opacity .5s ease;
}

.img-wrap:hover:after {
    opacity:1;
}

.img-wrap img {
    display: block;
}