文字遮罩和二级菜单

.box{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;

    }
    .box .info{
        width: 200px;
        height: 300px;
        background-color: rgba(0,0,0,0.5);
        color: white;
        position: absolute;
        left: 0;
        top:300px;
        transition: all 500ms ease;
    }
    .box:hover .info{
        top:150px
    }

运行结果

1.JPG

二级菜单

 .box{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
        position: relative;
        /*overflow: hidden;*/

    }
    .box .info{
        width: 200px;
        height: 300px;
        background-color: rgba(0,0,0,0.5);
        color: white;
        position: absolute;
        left:200px;
        top:0px;
        display: none;
        /*left: 0;*/

运行结果

2.JPG