- This topic has 7 replies, 2 voices, and was last updated 4 years ago by
.
-
Posts
-
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.
Customer Support
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,
AttilaAwesome – glad to hear that!
- You must be logged in to reply to this topic.
