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——齿轮转动关键代码
May 02 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php简单实现MVC
2015/02/05 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python opencv实现运动检测
2018/07/10 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
保护环境建议书
2014/03/12 职场文书
工程承诺书怎么写
2014/05/24 职场文书
统计专业自荐书
2014/07/06 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
泰山导游词
2015/02/02 职场文书
大班上学期个人总结
2015/02/13 职场文书