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); //放大倍数  可根据个人需求进行设定
}
相关推荐
牧羊狼的狼9 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手11 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one11 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲11 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell11 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_4378309413 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮13 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel13 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常14 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip14 小时前
JavaScript事件流
前端·javascript