实现商品展示抽屉效果 css

<style>
    #box{
        width:2000px;
        height:328px; 
        overflow: hidden;
    }
    #box >div::after{
        content: ' ';
    }
    #box >div>div{
        float: left;
        width:200px;
        border:1px solid #ffa8a8;
        box-sizing: border-box;
        height: 100%;
    }
    #box >div:nth-child(2){
        background: #f2ffcd; 
    }
    #box >div:nth-child(3){
        background: #d7d7d7; 
    }
    #box >div:nth-child(4){
        background: #c3fff4; 
    }
    #box >div{
        width: 200px;   
        height:328px;
        background: blanchedalmond;
        float: left;
        cursor: pointer;
        transition: width 1s;
    }

    #box>div:hover{
        width:800px;
    }
</style>

<div id="box">
    <div>
        <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
</div>