HTML5 图片悬停放大的实现代码示例


Posted in HTML / CSS onDecember 04, 2019

图片悬停放大效果:

HTML5 图片悬停放大的实现代码示例

HTML5 代码如下:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3图片悬停放大动画</title>
    <link rel="stylesheet" href="css/image-hover.css" type="text/css">
    <link rel="stylesheet" href="css/image-hover-main.css" type="text/css">
</head>
<body>
    <div id="image-container">
            <div class="img" id="img-1">
                <div class="mask"></div>
                <img src="img/01.jpg">
            </div>
            <div class="img" id="img-2">
                <div class="mask"></div>
                <img src="img/07.jpg">
            </div>
            <div class="img" id="img-3">
                <div class="mask" id="mask-1"></div>
                <div class="mask" id="mask-2"></div>
                <img src="img/05.jpg">
            </div>
            <div class="img" id="img-4">
                <div class="mask"></div>
                <img src="img/04.jpg">
            </div>
            <div class="img" id="img-5">
                <div class="mask"></div>
                <img src="img/06.jpg">
            </div>
            <div class="img" id="img-6">
                <div class="mask"></div>
                <img src="img/08.jpg">
            </div>
            <div class="clearfix"></div>
        </div>
    
</body>

</html>

另外附上两个css 样式(image-hover.css 和 image-hover-main.css):

image-hover.css

.img{
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
    float:left;
    margin-left:-50px;
    margin-right:-50px;
    margin-top:-10px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    }
.img img{
        padding:10px;
        border:1px solid #fff;
}
.img:hover{
    -webkit-transform:scale(0.8);
    -webkit-box-shadow:0px 0px 30px #ccc;
    -moz-transform:scale(0.8);
    -moz-box-shadow:0px 0px 30px #ccc;    
    -o-transform:scale(0.8);
    -o-box-shadow:0px 0px 30px #ccc;    
}     
.img .mask{
    width: 100%;
    background-color: rgb(0, 0, 0);
    position: absolute;
    height: 100%; 
    opacity:0.6;
    cursor:pointer;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration:0.5s;
}
#img-1:hover .mask{
    height:0%;    
}
#img-2:hover .mask{
    height:0%;    
    margin-top:130px;
}
#img-4:hover .mask{
    margin-left:219px;
    margin-top:135px;
    height:0%;
    width:0%;
}
#img-3 #mask-1 {
    width:50%;
}
#img-3 #mask-2{
    width:50%;
    margin-left:211px;
}
#img-3:hover #mask-1{
    width:0%;
}
#img-3:hover #mask-2{
    margin-left:430px;
    width:0%;
}
#img-5:hover .mask{
    margin-left:219px;
    margin-top:135px;
    height:0%;
    width:0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
}
#img-6:hover .mask{
    margin-left:219px;
    margin-top:135px;
    height:0%;
    width:0%;
    -webkit-transform: rotateZ(750deg);
    -moz-transform: rotateZ(750deg);
    -o-transform: rotat(750deg);
}

image-hover-main.css
 

html{
    height:100%;
    margin:0;
    padding:0;
    width:100%;
    background-color:#242424;
    font-family:arial;
}
body{
    height:100%;
    margin:0 auto;
    padding:0;
    width:980px;
}
#logo  {
    background-color:#242424;
    color:#F1F1F1;
    font-size:43px;
    padding:15px 0 6px;
    text-shadow:0 0 2px #FFFFFF;
}
#logo a {
    color:#F1F1F1;
}
#container{
    width:100%;
    min-height:800px;
    background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.heading{
    font-size:24px;
    color:#dfdfdf;
    text-align:center;
    padding-top:20px;
}
.legal{
    text-align:center;
    color:5f5f5f;
    font-size:16px;
    margin-top:100px;
    background:-moz-linear-gradient(center top , #000, #242424) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));
    background:-o-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));

}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.warning{
    color:#555;
    text-align:center;
    font-size:12px;
}
.msg{
    color:#dfdfdf;
    text-align:center;
    font-size:14px;
    line-height:1.5em;
}
.clearfix{
    clear:both;
    float:none;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 #HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 #HTML / CSS
You might like
PHP之数组学习
2011/05/29 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python append、extend与insert的区别
2016/10/13 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
投标服务承诺书
2014/05/28 职场文书
创先争优一句话承诺
2014/05/29 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
借条格式范本
2015/05/25 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang