[Resolved] Fade in-out opacity on hero background images

[Attila]

Hi,

I´d like to have following hover effect on my hero background images.
I could make it with css opacity, but the problem is that also the title text is fading, which should have opacity:1 in both states.

.page-hero {
background-color: rgba(0,0,0,0.35);
background-image: url(https://hiidenvedenbbq.fi/wp-content/uploads/2022/05/hiidenveden-grilli-ja-bbq-ruokalista_1440x810.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
color: #ffffff;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
opacity: 0.3;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.page-hero:hover {
opacity: 1;
background-image: url(https://hiidenvedenbbq.fi/wp-content/uploads/2022/05/hiidenveden-grilli-ja-bbq-ruokalista_1440x810.jpg);
}

Do you have another solution how to accomplish this task?

Thank you for your help in advance.

[David]

Hi there,

you can’t adjust the opacity of just the background-image.
Can i see the site so i can propose the best solution ?

[Attila]

Thank you for the quick reply.

[David]

Try this CSS:

.page-hero .inside-page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: 1;
    opacity: 0.3;
    transition: opacity 0.3s ease-in;
}
.page-hero:hover .inside-page-hero:before {
    opacity: 0;
}

[Attila]

Yes, I have tried but the h1 title has opacity in normal state as well, it should remain #fff all the time. Only the background image should be effected from the opacity change.

[David]

Add this CSS to prevent that:

.page-hero .inside-page-hero h1 {
    position: relative;
    z-index: 1;
}

[Attila]

David you rock! Now it really works as it should, thank you very much.

Best regards,
Attila

[David]

Awesome – glad to hear that!

[Author]

Posts