Google Sites中transform:scale放大图片被截断，如何实现层级覆盖？

我在Google Sites上实现鼠标悬停放大图片的交互效果，但页面存在多层iframe-html-body嵌套结构，放大后的图片会被父元素区域截断。当前使用的代码如下：

原实现代码 #

CSS #

.zoom {
  padding: 0px;
  background-color: white;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
  display: inline-block;
  float:right;
}

.zoom:hover {
  transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

HTML #

<div class="zoom">
  <img
    src="https://picsum.photos/106/79"
    width="106px"
    height="79px"
  /> 
</div>

<span class="summary">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>

解决方案 #

问题根源是Google Sites的嵌套容器默认可能设置了overflow: hidden，同时放大元素的层级不够，导致被截断或被其他元素遮挡。可以通过以下调整解决：

• 给.zoom容器强制取消溢出限制，同时设置定位和高层级，确保放大后的图片能突破父容器并覆盖其他元素
• 可选调整transform-origin，让图片从指定位置（比如你当前的右上角）开始放大，避免偏移

修改后的CSS代码：

.zoom {
  padding: 0px;
  background-color: white;
  transition: transform .2s;
  margin: 0 auto;
  display: inline-block;
  float:right;
  overflow: visible !important; /* 强制关闭父容器的溢出截断 */
  position: relative; /* 让z-index生效 */
  z-index: 9999 !important; /* 提升层级，确保覆盖其他元素 */
}

.zoom:hover {
  transform: scale(2);
  transform-origin: top right; /* 从右上角开始放大，适配float:right的布局 */
}

如果调整后还是被截断，检查上层的iframe或父级容器是否也有overflow: hidden样式，同样给这些容器添加overflow: visible !important即可。Google Sites会自带一些默认样式，所以!important是必要的，用来确保你的自定义样式优先级更高。

内容的提问来源于stack exchange，提问作者FooBar