html+css图片下弹出蒙版

鼠标移入时弹出蒙版！！！

html<!DOCTYPE html<html lang="en"<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="zimutanchu.css">
    <title>Title</title>
</head>
<body>
<div class="mu1">
    <div class="mu2">
        <ul>
            <li>
                <a href="">
                    <img src="img/46.jpg" alt="">
                    
                    
                    <div class="zi">
                        <div class="tu1">
                        <img src="img/55.jpg" alt="">
                        </div>
                        <h5>hufef ef</h5>
                    </div>
                    
                    
                </a>
            </li>

           

         

  
        </ul>
    </div>
</div>

</body>
</html>

css:
*{
    margin: 0;
    padding: 0;
}


.mu1{
    width: auto;
}
.mu2{
    width: 1200px;
    height: 400px;
    margin: auto;
}
ul{
    width: 1200px;
    height: 230px;
    border: 1px solid red;

}
ul li{
    width: 25%;
    list-style: none;
    float: left;
    position: relative;
    overflow: hidden;
}
.zi{
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 100px;
    background-color: transparent;
}
.tu1{
    float: left;
}
h5{
    float: left;
}
ul li:hover .zi{
    background-color: black;
    opacity: .5;
    left: 0;
    bottom: 0;
    transition: all linear 1s;
}



posted @ 2016-04-24 20:53  三石！  阅读(555)  评论(0)  编辑  收藏  举报