如何实现鼠标悬停时同步缩放Box（div）及其内容？

当然可以！纯CSS就能轻松搞定这个需求，核心就是用transform: scale()属性——它会让目标元素连同所有子内容一起同步缩放，完全不会出现盒子单独放大、内容脱节的情况，而且性能还很棒（因为是GPU加速的变换）。

直接上示例代码 #

先看一个完整的可运行实现：

<div class="zoom-box">
  <h3>我是标题</h3>
  <p>这是一段测试文本，悬停时我会跟着盒子一起放大</p>
  <img src="https://picsum.photos/200/150" alt="示例图片">
</div>

.zoom-box {
  /* 基础样式，可根据需求自定义 */
  width: 300px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  /* 关键：添加过渡效果，让缩放动画更平滑自然 */
  transition: transform 0.3s ease;
  /* 可选：防止缩放时内容溢出容器边界 */
  overflow: hidden;
}

.zoom-box:hover {
  /* 核心：悬停时缩放1.1倍，数值可按需调整 */
  transform: scale(1.1);
}

/* 可选：内部元素的基础样式，无需额外缩放设置——transform已经帮你同步搞定了 */
.zoom-box h3, .zoom-box p {
  margin: 0 0 10px;
}

为什么这个方法靠谱？ #

• transform: scale()是对整个元素的几何变换，它会把元素的所有子节点、文本、图片、甚至边框/内边距一起按比例缩放，完全同步，不会出现盒子放大了但内容还停留在原地的尴尬情况。
• 对比用width/height强行放大：这种方式会触发页面重排，而且子元素不会自动跟着缩放，你还得手动调整字体大小、图片尺寸，麻烦又容易出错。

实用小技巧 #

• 调整缩放幅度：比如scale(1.05)是轻微放大，scale(1.2)是更明显的放大，按需修改数值即可。
• 控制动画速度：把transition里的0.3s改成你想要的时长，比如0.5s会让动画更慢更柔和。
• 避免溢出父容器：如果你的缩放盒子在某个固定大小的父元素里，给父元素加overflow: hidden就能防止缩放内容跑出去。

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