无需JS和jQuery代码实现CSS3鼠标浮动放大图片


Posted in HTML / CSS onNovember 21, 2016

无需JS和jQuery代码实现CSS3鼠标浮动放大图片

<html>
<head>
<title></title>
<style>
.box {
    /* 可见视觉区域 */
    width: 480px; height: 250px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.size {
    width: 1000px; height: 1000px;
    position: absolute; left: 50%; top: 50%;
    margin: -500px 0 0 -500px;
    /* 水平居中 */
    text-align: center;
}
.zoom {
    /* 缩放的元素 */
    width: 480px; height: 250px;
    vertical-align: middle;    
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
}
.box:hover .zoom {
    /* hover放大 */
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    zoom: 1.05;
}
:root .box:hover .zoom {
    zoom: 1;
}
.middle {
    /* 垂直居中 */
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
</style>
</head>
<body>
<h4>左上角定位</h4>
<div class="box">
<img src="dafu.jpg" class="zoom">
</div>
<h4>居中定位</h4>
<div class="box">
    <div class="size">
        <img src="dafu.jpg" class="zoom"><i class="middle"></i>
    </div>
</div>
</body>

以上所述是小编给大家介绍的无需JS和jQuery代码实现CSS3鼠标浮动放大图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 #HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python中星号变量的几种特殊用法
2016/09/07 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
法人代表任命书范本
2014/06/05 职场文书
行政管理专业求职信
2014/07/06 职场文书
四风对照检查材料范文
2014/09/27 职场文书
教师个人发展总结
2015/02/11 职场文书
2015暑假假期总结
2015/07/13 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
Python合并多张图片成PDF
2021/06/09 Python
Redis主从复制操作和配置详情
2022/09/23 Redis