css如何控制这个遮罩上的文字在中间显示，以及改变遮罩的出现方式，从上到下太呆板？

Question

<div class="sw_mask" data-text="教育行业">
                    <img  src="/ehouse/img/service/research_1.jpg" class="second_img">    
                </div>
                

/* 遮罩 */
.sw_mask {
    position: relative;
    overflow: hidden;
}

.sw_mask:after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    content: attr(data-text);
    transition: all 1s ease;
    transform: translateY(-100%);
    color: #FFF;
}

.sw_mask:hover:after {
    transform: translateY(0);
}