纯CSS实现手风琴

   <div class="box">
        <ul>
            <li class="active">
                <a>
                    <img src="./images/1.jpg" />
                </a>
                <div class="content">
                    Content
                </div>
            </li>
            <li>
                <a>
                    <img src="./images/1.jpg" />
                </a>
                <div class="content">
                    Content
                </div>
            </li>
            <li>
                <a>
                    <img src="./images/1.jpg" />
                </a>
                <div class="content">
                    Content
                </div>
            </li>
            <li>
                <a>
                    <img src="./images/1.jpg" />
                </a>
                <div class="content">
                    Content
                </div>
            </li>
        </ul>
    </div>

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 1000px;
    margin: 0 auto;
}
.box ul {
    width: 100%;
}
.box ul li{
    position: relative;
    float: left;
    width: 180px;
    height: 360px;
    overflow: hidden;
    transition: all .8s;
}
.box ul li img {
    width: 100%;
    height: 100%;
}
.box ul li.active{
    width: 460px;
}
.box .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    color: #ffffff;
}
.box ul li.active .content {
    display: none;
}

   $(function(){
        $('.box ul li').mouseover(function(){
            $(this).addClass('active').siblings().removeClass('active');
        })
    })