无需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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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通过header实现文本文件下载的代码
2010/08/08 PHP
Yii实现简单分页的方法
2016/04/29 PHP
php封装的page分页类完整实例
2016/10/18 PHP
显示、隐藏密码
2006/07/01 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
python创建文件备份的脚本
2018/09/11 Python
简单了解django索引的相关知识
2019/07/17 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
小学教师师德整改措施
2014/09/29 职场文书
导游欢送词
2015/01/31 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript