Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joe Consterdine
Joe Consterdine
13,965 Points

Best way to text overlay on top of background-image on hover?

Hey guys,

I'm finding it difficult to find a way to lower the opacity of my background-image on hover so the text above will show clear.

Any ideas?

Cheers

<div class="home-offer">
         <div class="container">
            <div class="home-offer-caption">
                <h2>FREE UK DELIVERY</h2>
                <span>On all orders above £12</span>
                <a href="#" class="btn btn-lg btn-primary home-offer-button">Find Out More</a>
            </div>
         </div>
     </div>

.home-offer {
    margin-top: 4rem;
    height: 300px;
    background: $brand-secondary;
    position: relative;
}

.home-offer-caption:hover{
    opacity: .2;
}

.home-offer-caption {
    height: 300px;
    padding: 2rem 0;
    text-align: center;
    padding: 6rem 0;
    background: url('../img/gardening.jpg');
    background-size: cover;
    background-position: 50% 50%;

    @media (min-width: 400px) {
        padding: 5rem 0;
    }

    @media (min-width: 495px) {
        padding: 7.5rem 0;
    }
}

.home-offer-caption h2 {
    color: #fff;
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;

    @media (min-width: 400px) {
        font-size: 5rem;
    }
}

.home-offer-caption span {
    color: #fff;
    text-transform: uppercase;
    display: block;
    padding: 1rem 0;
}

.home-offer-button {
    margin: 1rem 0;
}

4 Answers

mrhummel
mrhummel
Courses Plus Student 1,765 Points

Don't get me wrong about having multiple opacities! You can define a parents opacity as 0.5 and the childrens opacity as 0.75, but be advised that the children now has an absolute opacity of 0.375 (75% of the parents 50%)! Therefore the childrens opacity won't get higher than the parents.

<div class="parent">
    <h2>Some Title</h2>
    <span>Some Description</span>
</div>

.parent {
    position: relative;
    overflow: hidden;
}

.parent:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.6;
    background-image: url("../img/gardening.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

Does that solve your problem?

mrhummel
PLUS
mrhummel
Courses Plus Student 1,765 Points
mrhummel
mrhummel
Courses Plus Student 1,765 Points

If you change the opacity of an element, everything inside it can't have a higher opacity value. I would recommend to use an absolute positioned pseudo-element for the background-image. You can then change the opacity of that pseudo-element without affecting the opacity of the container or the text.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi mrhummel,

thanks for the suggestion but I still can't find a solution.

If I do this:

.home-offer-caption::after {
    content: "";
    display: block;
    height: 300px;
    width: 100%;
    background: url("../img/gardening.jpg");
    top: 0;
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    opacity: .3;
}

then that doesn't work because the ::after is still placed inside the div but at the end. This goes back to what you were saying about not been able to have two opacities in one parent.

So then I tried taking it out of the div all together and positioning it absolutely but then it doesn't work because it doesn't look for the div with relative positioning as I've taken it out of it.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Seems so! Guess I wasn't using Z-Index correctly.

Thanks mate :)