CODEWITHSUNDEEP
css
John
John

Reputation: 1

Increase opacity of div with hover with css

I have two divs that have an opacity less than 1. When hovering I would like to increase the opacity to 1 but can't seem to get it to work. Not sure if it is because of the z-index I have in the css. I need the z-index to prevent the whole div having reduced opacity.

This is the html

<section class="events">
  <div class="events-wrapper">
    <h2>Select the session you would like to attend for more information</h2>
    <div class="melbourne-left">
    <div class="melbourne-left-background">
      <h1>Melbourne</h1>
      <h3>Sunday Jan 21st 2015</h3>
    </div>
    </div>
  <div class="sydney-right">
  <div class="sydney-right-background">
   <h1>Sydney</h1>
   <h3>Sunday Feb 1st 2015</h3>
  </div>
  </div> 
</div>
</section>

And this is the css for the 'melbourne' divs

.melbourne-left {
    display: block;
    float: left;
    width: 44%;
    clear: both;
    margin-left: 5%
}

.melbourne-left-background {
    position: relative;
    z-index: 1;
    min-height: 420px;
}

.melbourne-left-background::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://melbourne.jpg) center center;
    opacity: .4;
    width: 100%;
    max-width: 855px;
    background-repeat: no-repeat;
   }

.melbourne-left-background:hover {
    opacity: 1.0;
}

Upvotes: 0

Views: 995

Answers (1)

SW4
SW4

Reputation: 71230

You are setting the opacity on the :before psuedo element of .melbourne-left-background, however you are detecting the :hover state and changing opacity for the DOM element and not the psuedo.

As such, change:

.melbourne-left-background:hover {
    opacity: 1.0;
}

To

.melbourne-left-background:hover::before {
    opacity: 1.0;
}

Upvotes: 1

Related Questions