Different image overlays on images in the textblock

Hello guys,

Can find a way to make different overlays on my images in the textblock.
Adding the class or id to each image’s or attributes somehow does not work.

Here is my website: https://www.zavadskis.com/home/
Here is my Custom CSS:

.avia_transform a:hover .image-overlay {
opacity: 0.8 !important;
}

.avia_transform a .image-overlay {
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
background-image: url(https://www.zavadskis.com/wp-content/uploads/Iliustracija-2.png);
}

Can you look into it to tell what I’m missing?

Many thanks!