Reputation: 1425
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
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
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