css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片

实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容器内操作.切记不要忘记在父盒子里面加上 overflow: hidden！

<div class="big-box"><img src="../img/xxx.png">
</div>

常用css 属性

overflow: hidden 该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位
transform:scale() 可以实现按比例放大或者缩小功能
transition 可以设置动画执行的时间，实现缓慢或者快速的执行动画
经常写成：transition: all xx秒

.big-box{width: 60px;height: 50px;margin-top: 20px;margin-left: 30px;padding: 5px 5px 5px 5px; // padding 可以让图片在div上下左右居中,这样图片在放大时,不会被div容器遮挡border-radius: 5px 5px 0 0;overflow: hidden;
}
.big-box :hover{cursor: pointer; // 鼠标移入变为小手
}
.big-box img{height: 30px;transform: scale(1.1); //原本的图片的大小，图片原来的大小不变transition: all 0.6s;}
.big-box img:hover{transform:scale(1.5); //图片按照比例，整体放大了1.2倍// 当鼠标经过是图片放大的倍数为1.2倍
}

transform 分为等比例缩放和宽高不等比缩放
等比缩放: transform: scale(1.1) // x和y 都是1.1
非等比缩放: transform: scale(1，2) //x轴,y轴分别是1 和2

css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片相关推荐

C# 鼠标悬浮mouseHover事件的添加实现鼠标悬浮在按钮或者控件显示相关的帮助信息
有些时候,我们为了让程序更加的人性化,降低应用的难度,必要的帮助信息是不可少的. 比如,尽管某些按钮我们已经给其取了名字,我们可以从名字上大致判断出这个按钮的作用是什么,但是有些时候这些信息还是不够, ...
selenium 鼠标悬浮_处理Selenium3+python3定位鼠标悬停才显示的元素
先给大家介绍下Selenium3+python3--如何定位鼠标悬停才显示的元素定位鼠标悬停才显示的元素,要引入新模块 # coding:utf-8 from selenium import web ...
quill鼠标悬浮出现提示_CHERRY MC8.1鼠标评测：超前设计延续军火箱信仰
CHERRY作为机械键盘品牌拥有非常高的知名度,许多朋友的第一把机械键盘就是CHERRY品牌.在CHERRY产品线中,最具信仰的一定是军火箱MX8.0键盘.键盘本身手感颜值俱佳,独特的军火箱包装更是收 ...
echarts折线图鼠标悬浮竖线_Echarts折线图问题,鼠标悬停的地方不能正确展示数据怎么回事呢?...
前端代码 js myChart.setOption({ title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:[ ...
通过设置CSS属性来实现鼠标悬浮放大或缩小区域
HTML+CSS设置鼠标悬浮区域放大 1.功能介绍代码分析 1.功能介绍通常我们在做前端网页时,当鼠标悬浮在一张图片或者一个DIV上时,想增添一些东湖效果,比如放大等.不废话直接上代码. CSS代 ...
css鼠标悬浮显示效果(鼠标手势)
鼠标悬浮显示效果将鼠标悬浮到下面超链接上看效果! css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 CSS鼠标手型效果 Example:CSS鼠标手型效果 C ...
chrome调试鼠标悬浮事件(不是CSS:hover)
文章目录文章参考问题描述解决办法鼠标右键弹出菜单 ctrl+shift+c 文章参考 chrome浏览器如何审查鼠标移入事件? Chrome调试鼠标悬停后出现的元素 chrome模拟鼠标悬停调 ...
layui实现上传图片鼠标悬浮展示删除及预览图标
layui实现上传图片鼠标悬浮展示删除及预览图标 ** 进行layui实现图片上传功能时,发现无法实现悬浮展示删除及预览图标功能,查询很多资料后,自己整合一套自己的方法,特此记录. 整体思路就是使用鼠 ...
IDEA Translation插件安装及设置鼠标悬浮提示的自动翻译
1.安装插件 Translation 2.设置鼠标悬浮提示 3.在代码界面鼠标悬停在方法上就会自动翻译提示
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...

css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片

css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片相关推荐

最新文章

热门文章