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的@media来编写响应式的页面
Nov 01 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
HTML常用标签超详细整理
Mar 19 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日历程序
2006/12/06 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JS前端加密算法示例
2016/12/22 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
jQuery设计思想
2017/03/07 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python何时应该使用Lambda函数
2019/07/02 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
竞聘书格式及范文
2014/03/31 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js