How to create a row of three expandable/collapsible divs which react on hover?

Question

What I am trying to achieve is a container with three inline divs that expand on the whole container when the mouse is hovered on them. One of the divs is floated to the right, one to the left, and one is centred. Here is a jsfiddle page so you can understand better what I am trying.

https://jsfiddle.net/hn59ooL5/

<div id="container">
        <div id="container-left">
            <div id="info-img-container" onmouseover="hoverOverLeft();" onmouseout="unHoverLeft();">
                <img id="info-img" src="images/info.png" alt="info" name="info"/>
            </div>
            <div id="info-text-container">
                Hover your mouse over this card to find info on how to use this website
            </div>
        </div>

        <div id="container-right">
            container right
        </div>

        <div id="container-center">

        </div>


    </div>

and the css:

#container{
margin: auto;
width: 85%;
height:55%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;

}
#container-left{
position: absolute;
background-color:#F8F8FF;
width: 33%;
height:100%;
display: inline-block;
float: left;
z-index:2;
transition: all 2s ease-in-out;
}

#container-left:hover{
width:100%;
z-index:999;
transition: all 2s ease-in-out;
}

#container-right{
position:absolute;
background-color:#6050DC;
width: 33%;
height:100%;
display: inline-block;
float: right;
z-index: 4;
right:0;
transition: all 2s ease-in-out;
}

#container-right:hover{
width:100%;
z-index:201;
transition: all 2s ease-in-out;
}

#container-center{
width: 33%;
height:100%;
display: inline-block;
position: absolute; 
left: 33.5%;
z-index: 3;
background:url("../images/cloud.jpg") no-repeat;/*sets background pattern*/
background-size: cover;
}



#info-img-container{
float:left;
display: inline-block;
margin-left:0;
width:28%;
height:100%;
vertical-align: middle;
}

#info-text-container{
float: right;
display: inline-block;
font-size: 50px;
position:relative;
margin-right:0;
width:65%;

}

#info-img{
height: 100%;
width: 220px;
vertical-align: middle;
}

I am getting the two side divs to expand, the left one is expanding to the right and the right one to the left, but I do not know how to make the center one expand on both sides. Any ideas how can I do this with HTML/CSS/JavaScript?

Answer 1

Add the following css and you should get a fullscreen hover on the center div.

#container-center:hover {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 5;
}

Don't forget to add the transition to #container-center if you want it to match the other hovers.