css3+vue3实现img图片放大的两种效果,图片盒子整体放大和盒子不变仅图片放大

效果1:

当鼠标hover上去的时候,图片所在的整个盒子都呈现放大效果

效果2:

当鼠标hover上去,图片所在的盒子大小不变,图片从里面的中心点呈现一个放大的视觉效果

效果1实现代码:

复制代码
<img
src="./img/a.png"
alt="第一张图片"
class="hover-zoom"
	/>

// css
.hover-zoom {
							transition: transform 0.2s ease; /* 平滑过渡效果 */
							width: 400px; /* 或你想要的宽度 */
							height: 462px; /* 保持图片比例 */
						}
.hover-zoom:hover {
							transform: scale(1.1); /* 放大1.1倍 */
						}

效果2实现代码:

复制代码
 <div class="img-box">
            <img src="./img/b.png" class="img-two">
 </div>


//css代码
.img-box{
    width: 366px;
    height: 296px;
    overflow: hidden;  // 必有 实现外框不变里面放大的关键代码
}
.img-two{
    display: block;
    width: 100%;
    height: 100%;
    transition: all 1s;
}
.img-two:hover{
    transform: scale(1.2); //放大倍数  可根据个人需求进行设定
}
相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->5 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端6 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua7 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js