CSS变换比例打断图像覆盖

HTML标记：

<div class="item">
    <a href="url">
        <img src="photo.jpg" />
    </a>
</div>

此CSS在悬停时添加覆盖：

.item a img {
   transition: all 0.2s linear;
}

.item a:hover img {
   transform: scale(1.05);
}

.item a {
    position: relative;
}

.item a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none no-repeat center center;
    transition: all .3s linear;
}
.item a:hover:before {
    background:rgba(0,0,0, 0.5) url('img/zoom.png') no-repeat center center;
}

每一个单独工作都很好。然而，当我尝试使用CSS的两个部分时，只有缩放起作用；覆盖层被破坏了

---

简单地说，如何编写CSS来组合这两种效果？

您可以尝试将

z-index:1

添加到绝对定位元素

。项目a img{
过渡：所有0.2s线性；
}
.项目a：悬停img{
转换：标度（1.05）；
垂直对齐：顶部；
}
.项目a{
位置：相对位置；
显示：内联块；
}
.a项：在{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：无重复中心；
过渡：全部3秒线性；
z指数：1；
}
.项目a：悬停：在{
背景：rgba（0,0,0,0.5）url（'//dummyimage.com/50'）无重复中心；
}

---

简单的修复，尽管我不需要

垂直对齐：顶部

或

显示：内联块

。。。我刚刚添加了

z-index:1

。谢谢大家!！