变换规模＆amp;在悬停的背景颜色

Question

我正在努力做一些相当简单的事情，而且我一直在查看很多例子，但似乎无法像我期望的那样让它发挥作用。我想要做的是如果有一个悬停的图像将缩放（1.1）然后也添加背景颜色。你可以看到我在我创建的图像持有者中选择图像没有问题，并在悬停时缩放它，但是当我尝试将叠加添加到此并且在悬停时添加它时它不起作用。我附上了以下代码

<div class="image-holder">
        <img src="https://cdn2.artbees.net/jupiter5/orthosie/wp-content/uploads/sites/51/bfi_thumb/portfolio-feature-07-msnw0wxnyitxdmhlcfsb7elky0xl4drzq8bc37266o.jpg" width="300" height="200">
    <div class="image-overlay"></div>
</div>

.image-holder {
    position: relative;
    max-width: 33.333%;
    float: left;
    overflow: hidden;
}
.image-holder img {
    width: 100%;
    vertical-align: top;
    transition: all 0.5s;
    z-index: 2;
}
.image-holder:hover img {
    transform: scale(1.1);
}
.image-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.9);
    opacity: 0;
    z-index: 5;
}
.image-overlay:hover > img {
    opacity: 1;
}