图片悬停放大

鼠标放上图片，画面在框里慢慢推近

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<div class="frame"><div class="img"></div></div>
<style>
.frame { width: 340px; height: 230px; border-radius: 14px; overflow: hidden; position: relative; }
.img { position: absolute; inset: 0; background: url(你的图片) center/cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1); }
.frame:hover .img { transform: scale(1.14); }
</style>

<div class="group h-[230px] w-[340px] overflow-hidden rounded-[14px]"><div class="h-full w-full bg-cover bg-center transition-transform duration-500 [transition-timing-function:cubic-bezier(.22,1,.36,1)] group-hover:scale-[1.14]" style="background-image:url(你的图片)"></div></div>

export function ZoomImage({ src }) {
  return (<div style={{ width: 340, height: 230, borderRadius: 14, overflow: "hidden", position: "relative" }}>
    <div style={{ position: "absolute", inset: 0, background: `url(${src}) center/cover`, transition: "transform .6s cubic-bezier(.22,1,.36,1)" }}
      onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.14)"}
      onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"} />
  </div>);
}
/* 更推荐纯 CSS :hover（见 html-css 档），React 里也可用 group-hover */

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

外层框 overflow: hidden 裁住，内层图片 hover 时 scale 到 1.1 左右，配一个 0.5 秒级的 ease-out 过渡，就是「推近镜头」的感觉。放大幅度别超过 1.2，图片分辨率要留余量，不然放大后糊给你看。触屏没有 hover，这个效果在移动端自动缺席——别把关键信息藏在放大里。

How it works (English)

The outer frame clips with overflow: hidden; the inner image scales to ~1.1 on hover with a ~0.5s ease-out transition — that reads as a camera push-in. Don't exceed ~1.2×, and keep resolution headroom or the zoom reveals blur. Touch has no hover, so this effect is absent on mobile — never hide key information inside the zoom.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

图片悬停放大 · 提示词待复验 · →