Need help with hover effect on overlay

[tlorang]

I am building a landing page I am having a small problem with an overlay on the hover function hiding the text. 

Here is a link to the page I am building in the design manager:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

I have it set up with three images, There is an overlay on the image at about opacity 0.3, and rich-text that is white over both the image and the overlay. This is fine.

buttons

I set up a hover effect that changes the opacity of the overlay to 0.5. This works fine except the text is now BEHIND the hover overlay.

with hover

How do I keep the text in front of the overlay?

I have an attached css style sheet for these effects, I'll post it below.

I cannot figure out how to keep the text ON TOP of the hover overlay. 

I've tried adjusting the z-index and have only been able to make the overlay and the text disapear.... 

I do not think there is anything from the default Domain Stylesheet that is interfering with the new attached css stylesheet. When I Disable default Domain Stylesheet in the Head Options for the landing page, the problem continues. 

Does anyone have any suggestions?

Here is css from the attached stylesheet for the backgrounds and overlays. 

.resource-box {
box-shadow: 10px 10px 20px #888888;
}

.resource-box:hover {
box-shadow: 1px 1px 2px #888888;
}

.fontWhite {
color:#fff;
}

.fontWhite:hover {
color: #ffffff;
}

/*background images*/

.set-bg {
height: 350px;
}

.set-bg, .bg-2, .overlay {
background-size:cover;
background-position:center;
position:relative;
}

.set-bg, .bg, .overlay {
background-size:cover;
background-position:center;
position:auto;
background-repeat: no-repeat;
}
.get-bg {
display:none !important;
}
.overlay > div {
position:relative;
}
.overlay:before {
content:'';
position:absolute;
z-index: 0;
background:#00744f;
opacity:0.3;
top:0;
bottom:0;
right:0;
left:0;
}

.overlay:hover > div {
content:'';
position:absolute;
z-index: 0;
background:#00744f;
opacity:0.5;
top:0;
bottom:0;
right:0;
left:0;
}

Thank You,

Tim Lorang

[anthonypizzurro · Accepted solution]

Hi There,

It looks like the hover effect is making the entire image block transparent, as opposed to just making the green background transparent. 

in `.overlay:hover>div` if you replace: 

    background: #00744f;
    opacity: .5;

with:

    background: rgba(0, 116, 79, .5);
    opacity: 1;     /* You can remove this line */

I think that will do the trick!

Best, 

Anthony

[tlorang]

Thank you @anthonypizzurro

That did it. 

I appreciate you taking a look!

I knew I was overlooking something simple. 

Tim