鼠标hover后图片被黑色遮挡动画效果

一个鼠标经过后，图片被黑色层遮挡并且放大的效果CSS
CSS代码
.b-album {  margin: 1.5rem 0 0; position: relative;    }
.b-album a {font-size: 1.5rem;  position: absolute; left: 0;right: 0;top: 0; bottom: 0; background: rgba(34,34,34,.8); justify-content: center; align-items: center; opacity: 0; transform:scale(.4);transition: .5s; display: flex; text-align: center; }
.b-album a:hover { opacity:1; transform:scale(1); color: #fff;  }
HTML代码
<div class="b-album">
                  <img src="https://qcloud.baidu.com/pc/67tOnd_TRjZRPW4cYALTOrkhGR7CAghdUVn1sfoPpqA7eTHqB8-wzrqFGewbKNKhjoJrvItByyS4HHaWdXyO_I7F0UeCRQYMHlogzbt7GHgNNiIYVnHvzugZCuBITtvjski7YaLlHpkrQUr5euoQrg.jpg" alt="">
                  <a href="#"><i class="fa fa-eye"></i></a>
              </div>