SOURCE

<ul>
    <li>
        <a href="#"><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""/></a>
        <div>园林酒店</div>
    </li>
    <li>
        <a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold2.jpg" alt=""/></a>
        <div>情侣酒店</div>
    </li>
    <li>
        <a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold3.jpg" alt=""/></a>
        <div>设计师酒店</div>
    </li>
    <li>
        <a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold4.jpg" alt=""/></a>
        <div>青年旅社</div>
    </li>
    <li>
        <a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold6.jpg" alt=""/></a>
        <div>海岛酒店</div>
    </li>
</ul>

 * {
            padding: 0;
            margin: 0;
            font-family: serif;
        }
        ul {
            width: 600px;
            height: 250px;
            overflow: hidden;
            margin:  100px auto;
        }

        li {
            list-style-type: none;
            float: left;
            width: 120px;
            height: 250px;
            position: relative;
            -webkit-transition: width 0.5s ease-out;
            -moz-transition: width 0.5s ease-out;
            -ms-transition: width 0.5s ease-out;
            -o-transition: width 0.5s ease-out;
            transition: width 0.5s ease-out;
        }

        li > a {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        li > div {
            width: 20px;
            position: absolute;
            top: 50px;
            left: 60px;
            transform: translateX(-50%);
            color: #FFFFFF;
            font-weight: 500;
            font-size: 20px;
        }

        img {
            height: 100%;
        }

        li:hover {
            width: 384.61px;
        }

        ul:hover li:not(:hover) {
            width: 50px;
        }
        li:hover>div {
            display: none;
        }