将鼠标悬停在图像上将无法与缩放图像正确对齐

Question

尝试在悬停时将65x65图像放大，但悬停覆盖图不会对任何图标居中。任何的想法？

.overlay{
    position:absolute;
    text-align: center;
    width: 100%;
    height:100%;
    opacity: 0;
    display: block;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #3b5998;
    border-radius:50px;
    margin: 5px;}

.icon{
    position: relative;
    width: 100%;
    width:65px;
    height:60px;
    display: inline-block;
    margin: 5px;
}

<div class="icon">
  <img src="IMG/icon.png">
  <div class="overlay">Name name</div>
</div>