Question

我努力但找不到解决方案...... 我需要，只需使用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>

但没有工作:(

Answer 1

尝试更改悬停时的Z-INDEX并添加一些过渡。

Answer 2

这是使用包装div和伪元素

的一个选项

JSfiddle demo

<强> 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>

<强> 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;
}

在悬停上添加图像层

2 个答案: