Add text and change colour overlay on masonry gallery and regular gallery

Hi there,

I’m looking for a way to achieve something that looks like this on my enfold galleries (both masonry and the regular gallery):

In the example, the gallery image shows first then when the mouse hovers, it goes to a solid colour with a text overlay,

I’ve been able to get to this point using CSS:

The problem with mine is that the solid colour shows FIRST then the image shows when you hover. I want to reverse this. Also I’ve no idea how to get the text to show on the solid colour. I also want to ensure that I can align the text as in the example, i.e left aligned, bold and regular fonts etc.

This is the CSS I’ve used to do the above. If someone could please show me what’s wrong? Thank you :)

.av-masonry-entry:before {
content: attr(title);
background: #f0211a;
position: absolute;
width: 97%;
height: 96.2%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 10;
font-weight: bold;
font-size: 24px;
}
.av-masonry-entry:hover:before {
opacity: 0.0;
}

.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
position: absolute; bottom: 40%; text-align: center;
}

.main_color .container .av-inner-masonry-content {
background-color: rgba(0, 0, 0, 0.0);
}

.main_color .av-inner-masonry-content {
background-color: rgba(0, 0, 0, 0.0);
}

.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(0, 0, 0, 0.0);
}

.main_color .avia-arrow {
background-color: rgba(0, 0, 0, 0.0);
}

.av-masonry-entry .av-masonry-entry-title {
color: #fff; font-size: ;
}