如何创建一行三个可扩展/可折叠的div，它们会在悬停时做出反应？

我想要实现的是一个带有三个内联div的容器，当鼠标悬停在它们上时，它们会在整个容器上扩展。其中一个div浮动在右侧，一个div浮动在左侧，另一个居中。这是一个jsfiddle页面，因此您可以更好地了解我的尝试。

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>

和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;
}

我正在使两侧的div扩展，左侧的div向右扩展，右侧的div向左扩展，但是我不知道如何使中心的div在两侧扩展。有什么想法可以使用HTML / CSS / JavaScript做到这一点吗？