CODEWITHSUNDEEP
cssopacity
DimC
DimC

Reputation: 515

CSS opacity - can't cover the text of the div underneath

I have a div with some text in it and "on hover", I want to display another div with some other text.

The problem is that the text from the first div comes through to the second and everything seems mingled up. I would like the second div to completely cover the first one.

Here is the jsfiddle

HTML

<div class="outer_box">
        <div class="inner_box">
            Main</div>
            <span class="caption">Caption</span>
</div>

CSS

.outer_box {
    width:100px;
    height:100px;
    background-color:orange;

}

.inner_box{
    width:100px;
    height:100px;
    position:absolute;

}

.caption {
    width:100px;
    height:100px;

    background:black;
    color:rgba(255,255,255,1);
    opacity:0;
}

.outer_box:hover .caption{
    opacity:1;
}

Thanks!

Upvotes: 0

Views: 287

Answers (3)

user396070
user396070

Reputation:

Add this to your CSS:

.outer_box:hover, .inner_box:hover {
    opacity:0;
}

If you will notice, I made sure to include the .outer_box:hover selector in case your intention ever was to make the outer box significantly larger than the inner box.

More useful information about the behavior of the opacity property can be found here: http://www.w3schools.com/cssref/css3_pr_opacity.asp

Upvotes: 1

br3w5
br3w5

Reputation: 4583

You need to style the text from the first div so that it disappears on hover:

.inner_box:hover .text {
  visibility:hidden;
}

Upvotes: 1

KBN
KBN

Reputation: 2974

.inner_box:hover {
    opacity: 0.0;
}

Upvotes: 1

Related Questions