CODEWITHSUNDEEP
htmlcssoverflow
Bejkrools
Bejkrools

Reputation: 1157

How to make div covers divs on hover?

I create div which is cotnst. heigth and it's overflowing content is hidden. But when i hover it then i want do display all content. I did some JSFIDDLE but all next divs moves down. I want to hovered div covers another divs on hover but i dont know how. Please, help.

html

<div class="header">
</div>
<div class="container">
    <div class="content">
        </div>
    <div class="button">
        <button>
            Button
        </button>
    </div>
</div>
<div class="space">   
</div>       
<div class="footer">
</div>

css

.header
{
    background-color: violet;
    height: 40px;
}
.container{
    background-color: orange;
    width: 400px;
}
.content{
    background-color: lightblue;
    height: 100px;
    overflow: hidden;
}
.content:hover {
    overflow: visible;
    height: auto;
}
.button{
    background-color: lightgreen;
    text-align: center;
    height: 30px;
}

Upvotes: 0

Views: 1692

Answers (2)

Benneb10
Benneb10

Reputation: 1489

You can try positioning it this way (absolute), it was respond to the position of the divs above it, but over look the position of divs below it so that they can be overlapped.

.container{
    position:absolute;
}

Upvotes: 2

Aman Sura
Aman Sura

Reputation: 256

Make use of the position and z-index attributes as below -

Change the two css classes 

.container{
    background-color: orange;
    width: 400px;
    position : relative;
    /* height same as that of content. Needed to avoid the jump effect */
    height : 100px;
}

.content:hover {
    overflow: visible;
    position : absolute;
    height : auto;
    z-index:999;
}

Upvotes: 2

Related Questions