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); //放大倍数  可根据个人需求进行设定
}
相关推荐
晓13137 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor14 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军15 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺17 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1118 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡19 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu20 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂22 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军23 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038123 分钟前
拓展运算符和剩余参数
前端