Question

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!

Answer 1

.inner_box:hover {
    opacity: 0.0;
}