如何为叠加在一起的图像添加 CSS 悬停效果？

问：

当我将鼠标悬停在图像上时，我正在尝试更改图像的不透明度，但它仅适用于最上面的图像。为了获得上下文，我在 Procreate 中制作了一个插图，然后将各个图层文件导出为 .png，并将所有图像堆叠在一起，使它们的位置保持相对。

在我的 HTML 文件中，我的代码如下所示：

<div class="root1">
    <img class="root1" src="root1.png">
</div>

我有 11 个不同的树根图，同样的代码从 root1 到 root11。

在CSS中，我有以下内容：

.root1,
.root2,
.root3,
.root4,
.root5,
.root6,
.root7,
.root8,
.root9,
.root10,
.root11 {
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    margin:auto;
    opacity: 0.5;
    transition: opacity 0.15s; 
}

.root1:hover,
.root2:hover,
.root:hover,
.root4:hover,
.root5:hover,
.root6:hover,
.root7:hover,
.root8:hover,
.root9:hover,
.root10:hover,
.root11:hover {
    opacity: 1;
}

归根结底，我的目标是这样的事情。

将相同的代码应用于 root1-root11 后，悬停效果仅适用于 root11，因为它是最顶层。我怎样才能解决这个问题，以便悬停效果对所有这些人都起作用？我真的不知道如何编码，所以任何帮助将不胜感激，谢谢。