CODEWITHSUNDEEP
htmlcss
user2521439
user2521439

Reputation: 1425

CSS transition fade out using opacity is not working

I am trying to have a div where on hover the image fades out (so you can only see the gray background behind) and some text fades in. I have been trying to do this using CSS transitions, however the opacity does not seem to change (i.e. I can still see the background image).

HTML:

<div id='options'>
  <div class='option'>
    <div class='back-option'>
    </div>
    <div class='front-option'>
      Add post
    </div>
  </div>
</div>

CSS:

#options {
  font-family: 'Segoe UI', 'Arial', sans-serif;
}

.option {
  position: relative;
  width: 6.25em;
  height: 6.25em;
  border-radius: 5px;
  cursor: pointer;
  background-color: #363636;
}

.back-option {
  position: absolute;
  width: 6.25em;
  height: 6.25em;
  border-radius: 5px;
  background-image: url(http://png-5.findicons.com/files/icons/2672/pixel_ui/16/add.png);
  background-size: contain;
  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
  opacity: 1;
  transition: opacity 0.5s;
}
.back-option:hover {
  opacity: 0;
}

.front-option {
  position: absolute;
  width: 6.25em;
  height: 6.25em;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  line-height: 6.25em;
  opacity: 0;
  transition: opacity 0.5s;
}
.front-option:hover {
  opacity: 1;
}

Here is a JSBin of it.

Upvotes: 0

Views: 1195

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106078

.back-option doesn't get the event mouseover , cause another element is over it. do 

#options:hover .back-option {
  opacity: 0;
}

and it will work.

you could as well give a background-color to .front-option, wich stands on top, and drop hover rules for .back-option

Upvotes: 0

Ryan
Ryan

Reputation: 3936

The hover isn't triggering because of the div placed over the top. I've simply modified the css to detect the hover on its parent instead.

.option:hover .back-option {
  opacity: 0;
}

Live example: http://jsbin.com/cucadami/4/edit

Upvotes: 1

Related Questions