html+css图片下弹出蒙版

html+css图片下弹出蒙版鼠标移入时弹出蒙版！！！

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

                        </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;
}