Html 如何向绝对定位元素添加覆盖？

正在尝试将覆盖添加到绝对定位图像。下面的代码工作正常，但并不完美

已经尝试过使用z-index属性，但运气不好

下面是代码笔上下面代码的工作示例

HTML

---

只需将

指针事件：none

添加到您的

。test i

规则中，它将正常工作（悬停时不闪烁）

要使其与

img

的位置/大小匹配，请使用相同的位置/大小值

.test{
位置：相对位置；
左侧填充：97px；
边缘底部：42px；
填充顶部：18px；
}
.测试img{
位置：绝对位置；
左：0；
最高：6%；
边框：3px实心#FFF；
宽度：80px；
光标：指针；
}
.测试图像：悬停+i{
不透明度：.7；
最高：6%；
}
.测试一{
背景：#ccc无重复滚动0；
颜色：#ffffff；
字体大小：20px；
前-50%；
左：0；
最高：6%；
边框：3px实心#FFF；
宽度：80px；
高度：80px；
线高：68px；
位置：绝对位置；
文本对齐：居中；
过渡：.3s；
不透明度：0；
指针事件：无；
}
.测试h2{
边际上限：0；
页边距底部：0；
}

乱数假文
正文

只是好奇而已。如果图像出现在@icookcode My我问你为什么要删除accept。。。在添加注释和第二个示例之前，它仍然完美地回答了您的原始问题。感谢您提供第二个示例。你这个男人。奇怪的我没有做任何改变，只是删除了我之前不小心提交的乱七八糟的评论并重新加载了链接。只是再次标记为已接受。

<div class="test">
  <img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive">
  <i class="fa fa-plus"></i>
  <h2>Lorem Ipsum</h2>                                  
  <p>text</p>
</div>

.test {
    position: relative;
    padding-left: 97px;
    margin-bottom: 42px;
    padding-top: 18px;
}
.test img {
    position: absolute;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    max-width: 80px;
    cursor: pointer;
}
.test img:hover + i {
    opacity: .7;
    top: 7px;
}
.test i {
    background: #ccc none repeat scroll 0 0;
    color: #ffffff;
    font-size: 20px;
    top: -50%;
    left: 3px;
    line-height: 68px;
    position: absolute;
    text-align: center;
    width: 74px;
    height: 74px;
    transition: .3s;
    opacity: 0;
}
.test h2 {
  margin-top: 0;
  margin-bottom: 0;
}