Custom hover overlay on Gallery thumbnails

[MT24]

Hi there, I'm converting a Divi site to GP with Elementor, and trying to replicate something similar to the existing overlay with icon when hovering on images. I have managed to achieve this on single image widgets via a combination of custom css, plus using Style > Hover > Opacity 0.3 in the widget. Examples of the result here:
mt24.uk/gta/sketchbooks
Here's the css used in the Child theme:
/* ----- IMAGE OVERLAY ON HOVER */
.elementor-image {
position: relative;
width: 100%;
}
/* Original image */
.elementor-image a {
display: block;
width: 100%;
height: auto;
}
/* Icon overlay */
.elementor-image a:before {
content: "\f055";
font-family: 'FontAwesome';
font-size: 30px;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: #0067cf;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 100%;
}
.elementor-image a:hover:before {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Now I'm trying to get the same effect on gallery images (mt24.uk/gta/photo-gallery) - where I can get the icon to work using the equivalent code above, but I don't know how to add the opacity overlay, because it's not available in the widget.

/* Gallery images */
.gallery-icon {
position: relative;
width: 100%;
}
/* Gallery Original image */
.gallery-icon a {
display: block;
width: 100%;
height: auto;
}
/* Gallery Icon overlay */
.gallery-icon a:before {
content: "\f055";
font-family: 'FontAwesome';
font-size: 30px;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: #0067cf;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 100%;
}
/* Gallery overlay */
.gallery-icon a:hover:before {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Any suggestions as to how I need to alter the code?
Thanks in advance

 

[MT24]

Took the shortcut.... I splashed out on Powerpack Elementor Addon. Weel worth it for all the extra possibilities.