CSS 悬停放大破坏了设计

Question

我正在与 CSS 语法作斗争，我正在尝试将其应用于下一个代码：

/*========== HOME ==========*/
.home{
    &__img{
        width: 300px;
        border-radius: .5rem;
        justify-self: center;
    }
}

悬停图像效果：要放大图像，让我们用下一个代码说

.zoom {
  padding: 50px;
  transition: transform .2s;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(2.5); 
}

我的 HTML div 代码：

 <div class="services__content">
     <img src="assets/img/image.jpg" class="zoom" class="home__img">
     <h3 class="menu__name">some text</h3>
     <span class="menu__detail">some text</span>
     <span class="menu__prices"></span>
 </div>

问题：

当我将鼠标悬停在图像，放大后的图像不会覆盖图像或附近的其他物体，而是在放大时位于图像或其他物体的下方，所有其他物体（例如图像、文本）叠加在放大的图像之上，效果类似于悬停图像的行为作为他们的背景......这对我来说是不正确的。

期望的效果：

当鼠标悬停在图像上时，当它放大时，它应该覆盖最近的对象并且不充当它们的背景，然后当您的光标转到另一图像时，它会恢复到其原始大小，然后下一个图像一个是放大的。

如果有人可以帮助我，我将不胜感激。似乎我所做的一切都不起作用，只是继续落后。同时将继续搜索并尝试进行实验。

谢谢！