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

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>

Answer 1

您需要摆脱margin: 5px;选择器中的.overlay css属性，以使叠加层与图像对齐。试试这段代码。

.icon{
    position: relative;
    width: 100%;
    width:65px;
    height:65px;
    display: inline-block;
    margin: 5px;
    border-radius: 50%;
    overflow: hidden;
}
.icon img {
  width: 100%;
}
.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:50%;
    z-index: 2;
    }
.icon:hover .overlay {
  opacity: 1;
}