怎样使得光标移到图片上字体的底色消失且居中？

图片说明

光标放上去有一个上移的动画效果，我想实现光标放上去的时候，那个字的底色没有，且字体居中，不是位于图片底部，求大神指点

给标签添加on-focus事件，然后在事件绑定的方法中修改样式

可以试一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 300px;
                height: 40px;
                text-align: center;
                line-height: 50px;
                background: blue;
                border: 1px solid red;
            }
            div:hover{
                line-height: 40px;
                background: rgba(0,0,0,0);
            }
        </style>
    </head>
    <body>
        <div>光标移动图片上字体的底色消失且居中</div>
    </body>
</html>

鼠标放上去的时候，重写元素背景颜色，置为透明让u-valign-bottom在mouseovercontainer垂直居中，文字在u-valign-bottom中垂直居中

.mouseovercontainer:hover .u-valign-bottom{
    background:transparent;
    text-align:center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height://"u-valign-bottom盒子的高度"
}
.mouseovercontainer{
    position: relative;
}