css实现悬停放大图片效果_使用transition和transform scale实现-css教程-PHP中文网

css实现悬停放大图片效果_使用transition和transform scale实现

P粉602998670

发布： 2025-12-23 08:56:02

原创

142人浏览过

通过CSS的transform和transition实现图片悬停平滑放大，首先设置图片默认样式并添加过渡效果，再利用:hover伪类改变scale值，配合overflow:hidden和object-fit:cover优化布局与显示。

css实现悬停放大图片效果_使用transition和transform scale实现

想让图片在鼠标悬停时平滑放大，可以用 CSS 的 transform 配合 transition 实现。这种方法性能好、代码简洁，还能控制动画速度和缩放比例。

基本原理

通过设置元素的 transform: scale() 改变其大小，再用 transition 添加过渡效果，就能实现悬停时的平滑放大。

实现步骤

1. 给图片设置默认样式，包括初始缩放为1，以及 transition 属性定义动画效果。

2. 使用 :hover 伪类，在鼠标悬停时改变 transform 的 scale 值。

3. 可选：设置 overflow: hidden 或容器限制，防止放大后溢出布局。

Studio Global

Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405

查看详情

立即学习“前端免费学习笔记（深入）”；

示例代码

以下是一个简单实用的例子：

<style>
.img-container {
  display: inline-block;
  overflow: hidden;
}

.img-container img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.img-container:hover img {
  transform: scale(1.2);
}
</style>

<div class="img-container">
  @@##@@
</div>

登录后复制