Html 浮动在父div上的图像

我正在尝试将一个（悬停）图像放在其父div的顶部。我使用了一个较旧版本的www.cssplay.co.uk/menu/magnize.html，尽管根据我的需要做了一些修改

我在以前的站点=>中找到了实现我想要的东西的方法。在中间，你会看到一张图片，左边是一张黑白照片，还有一些粉色/波尔多色和一些文字。如果您将光标悬停，图片将放大，以便您可以正确地看到它（我知道小屏幕分辨率可能有问题，但这不是现在的问题）

在我正在创建的一个新网站上，我正试图再次做同样的事情，但我无法让它工作：图像始终保持在它的父分区中。 您可以在这里查看=>

这两个网站的图像的CSS是相同的，所以我猜它一定是与父div有关，但我看不到它

我尝试了很多变化，使用display:block、position:relative（对于父div）、overflow:hidden和auto、添加额外的div或span、添加z-index

---

更新：我刚刚发现问题只发生在IE11中。（这让我更不理解为什么，因为第一个网站可以在所有浏览器中运行）

我认为解决方法是：

位置：固定

---

在ie 10/11中，由于content div上的border radius属性，它会裁剪大图像。解决方案是删除溢出：隐藏并使用标准clearfix清除此容器：

#content:before, 
#content:after {
  content: "";
  display: table;
}
#content:after {
  clear: both;
}
#content {
  zoom: 1;
}

---

这有帮助！虽然我仍然不明白为什么它在第一个网站上工作，而在新的网站上没有相同的代码。现在，当我悬停时，原来较小的图片下降了几个像素，当鼠标离开时又上升了。这是可以防止的吗？更新：检查第一篇博文谢谢，删除溢出：隐藏做的把戏！我不需要其他代码。此外，在我的另一个网站上，我也使用了边界半径，这并没有问题。