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); //放大倍数  可根据个人需求进行设定
}
相关推荐
鹏多多8 分钟前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~17 分钟前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo17 分钟前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
GDAL18 分钟前
Knockout.js 备忘录模块详解
javascript·knockout
玲小珑29 分钟前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦32 分钟前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼34 分钟前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet38 分钟前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞41 分钟前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑1 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github