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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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 和 MySQL 时区的一点总结
2008/03/26 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
浅析js中取绝对值的2种方法
2013/07/09 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python自动连接ssh的方法
2015/03/07 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
详细分析Python垃圾回收机制
2020/07/01 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
幼儿园家长寄语
2014/04/02 职场文书
英语教师个人工作总结
2015/02/09 职场文书
教师个人年终总结
2015/02/11 职场文书
2015个人简历自我评价语
2015/03/11 职场文书