Archived topic
Fade in-out opacity on hero background images
7 replies · Started by Attila on June 2, 2022
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.
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 ?
Thank you for the quick reply.
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;
}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.
Add this CSS to prevent that:
.page-hero .inside-page-hero h1 {
position: relative;
z-index: 1;
}David you rock! Now it really works as it should, thank you very much.
Best regards,
Attila
Awesome - glad to hear that!
