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

Vince Mendella
Vince Mendella
6,480 Points
Posted by Vince Mendella
Vince Mendella
6,480 Points

opacity of div on rollover

I have a div with a background image and type that is a link in the center. On hover I would like the opacity of the image to drop to .3 and the type not to fade out. The fade on the image on hover works but the type also fades out.

<div class="row index-quickLinks">
  <div class="col-xs-12 col-sm-4 col-md-4 index-childProtection">
     <h4><a href="#">Child Protection</a></h4>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 index-ourCulture">
    <h4><a href="#">Our Culture</a></h4>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 index-contact">
     <h4><a href="#">Contact</a></h4>
  </div>
</div><!-- .row index-quickLinks -->

.index-childProtection,
.index-ourCulture,
.index-contact {
    position: relative;
    float: left;
    padding: 0px;
    max-width: 100%;
    text-align: center;
    line-height: 100px;
    display: block;
    height: 100px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 1; 
}
.index-childProtection {
    background-image: url(img/index-childProtectionBtn.jpg);
    // opacity: 1;
}
.index-childProtection:hover {
    opacity: .3;
}
.index-ourCulture {
    background-image: url(img/index-ourCultureBtn.jpg);
}
.index-contact {
    background-image: url(img/index-contactBtn.jpg);
}
.index-childProtection h4 a,
.index-ourCulture h4 a,
.index-contact h4 a {
    font-family: $font-family-text;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    color: $rev-text;
    font-size: 1.84020835173542em;
    text-shadow: 2px 2px $dark-text;
}
.index-childprotection a:hover,
.index-ourculture a:hover,
.index-contact a:hover {
    opacity: 0.3; filter: alpha(opacity=30);
}

2 Answers

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

This is happening because you're changing the opacity of the titles parent, which the title then inherits.

i think you have 2 options. to put the image in a <img> element and then target its opacity on hover. this would decouple the image and the title.

the other option, and I'm not 100% sure this would work, its to target the title div with a descendant selector when the parent is hovered and then enforce an opacity of 100% on it. it would look something like this:

.index-childprotection:hover h4,
.index-ourculture:hover h4,
.index-contact:hover h4{
    opacity: 1;
}

its important that this code comes after the initial style that sets the opacity of the parent.

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

The child inherits opacity of parent's despite adding your code.

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

Hey, I just made a pen demonstrating the effect you want, here => https://codepen.io/iamamritpandey/pen/bYWRex

When you hover over the parent div, all the child'd div opacity is inherited, so I think you need to target ::before or ::after pseudo elements for changing opacity to get that effect. You will understand the code I posted.