HTML蒙版--带过渡效果

• HTML:

<div class="container">
    <div class="content">
        <img src="1.jpg">
        <a style="cursor:pointer" href="#"></a>
        <span>How is it going?</span>
    </div>
    <div class="mask">
        <span>2018</span>
    </div>
</div>

• CSS:

 .container {
    width: 555px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}

.mask {
    /*使mask层级高于content*/
    z-index: 2;
    background-color: #E8921F;
    opacity: 1;
    transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
}

.mask:hover {
    opacity: 0;
}

.mask,
.content a,
.content img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/*容器中用<span>包裹文字,使<span>水平垂直居中*/
.container span,
.mask span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.content span {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    /*使content文字部分层级低于mask*/
    z-index: 1;
}

.mask span {
    color: white;
    font-size: 48px;
    font-weight: bold;
}