How do I add CSS hover effects to images layered on top of one another?

Question

I'm trying to change the opacity of an image when I hover over it, but it only works on the topmost image. For context, I made an illustration in Procreate, then exported the individual layer files as .png and stacked all the images so that their positions remained relative.

In my HTML file, my code looks like the following:

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

I have 11 different drawings of tree roots, and this same code goes on from root1 to root11.

In CSS, I have the following:

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

Ultimately, I'm aiming for something like this.

After applying the same code to root1-root11, the hover effect only works on root11, because it is the topmost layer. How can I fix this so that the hover effect works on all of them? I don't really know how to code, so any help would be appreciated, thank you.