css-animate制作列表鼠标移动覆盖透明层
效果
比列使用bootcdn加速
html
<!DOCTYPE html>
<!-- saved from url=(0065)javascript:; -->
<html lang="en" ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SITE TITLE -->
<title>Home</title>
<!-- Latest Bootstrap min CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- animate CSS -->
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="./style.css"> </head> <body data-spy="scroll" data-offset="80"> <!-- START OUR TEAM -->
<section id="team" class="our_team section-padding">
<div class="container">
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="single_team">
<div class="img_wrap">
<img src="./1(1).jpg" class="img-responsive" alt="">
<div class="social_link">
<div class="social_table">
<ul class="list-inline">
<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End Col -->
<div class="col-md-3 col-sm-6">
<div class="single_team">
<div class="img_wrap">
<img src="./2(1).jpg" class="img-responsive" alt="">
<div class="social_link">
<div class="social_table">
<ul class="list-inline">
<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End Col -->
<div class="col-md-3 col-sm-6">
<div class="single_team">
<div class="img_wrap">
<img src="./3(1).jpg" class="img-responsive" alt="">
<div class="social_link">
<div class="social_table">
<ul class="list-inline">
<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End Col -->
<div class="col-md-3 col-sm-6">
<div class="single_team">
<div class="img_wrap">
<img src="./4(1).jpg" class="img-responsive" alt="">
<div class="social_link">
<div class="social_table">
<ul class="list-inline">
<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End Col -->
</div>
</div>
</section>
<!-- END TEAM --> </body></html>
css
body {
background-color: #fff;
color: #777;
font-family: "Source Sans Pro",sans-serif;
font-size: 16px;
font-weight:;
line-height: 26px;
}
html,
body { height: 100% }
a {
font-family: "Montserrat",sans-serif;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
a, a:hover {
color: #8bc34a;
text-decoration: none;
}
a:focus {
outline: none;
text-decoration: none;
}
ul,
li {
margin:;
padding:;
}
.section-padding { padding: 60px 0 }
.single_team{
margin-top: 30px;
}
.single_team h3{
color: #8bc34a;
font-size: 18px;
margin-bottom: 5px;
margin-top: 15px;
text-transform: uppercase;
}
.img_wrap{
position:relative;
}
.social_link{
height: 100%;
opacity:;
position: absolute;
text-align: center;
top:;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 100%;
z-index:;
background: rgba(0,0,0,0.5);
transform: scale(0);
}
.img_wrap:hover .social_link{
opacity:;
visibility: visible;
transform: scale(1)
}
.social_table{
display: table;
height: 100%;
width: 100%;
}
.social_table ul{
list-style: none;
display: table-cell;
list-style: outside none none;
padding:;
vertical-align: middle;
}
.social_table ul a{
background: #8bc34a none repeat scroll 0 0;
border: 1px solid #8bc34a;
border-radius: 50%;
color: #fff;
display: inline-block;
height: 40px;
line-height: 40px;
transition: all 0.5s ease 0s;
width: 40px;
}
.social_table ul a:hover{
background: #fff none repeat scroll 0 0;
color: #333;
border-color: #fff;
}
另两个css为bootcdn的极速加载文件
css-animate制作列表鼠标移动覆盖透明层的更多相关文章
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效
这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...
- web 开发 css 默认值列表
css默认值列表 HTML标签CSS属性默认值汇总 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默 ...
- 跟着辛星一起用CSS美化商品列表
说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受.特别有成就感,好啦,今天就分享一期自己用C ...
- CSS如何实现把鼠标放在行上整行变色
CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
随机推荐
- GFS 安装使用
准备环境: 1.OS: Centos:7.2x86_64 2.主机 server1: 192.168.30.41 wohaoshuai1 server2: 192.168.30.42 wohaoshu ...
- window下面的守护进程,redis守护进程,RunHiddenConsole免费下载
redis版本 在redis的目录下新建start_redis.bat 写入一下代码: D:/redis/RunHiddenConsole/RunHiddenConsole.exe redis-ser ...
- Vijos1982 NOIP2015Day2T2 子串 substring 动态规划
子串 (substring.cpp/c/pas) 题目链接 [问题描述]有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个 互不重叠 的非空子串,然后把这 k 个子串按照 ...
- js清除单选框所选的值
js清除单选框所选的值 $("input[type='radio']").removeAttr('checked');
- 关系网络数据可视化：3. 案例：公司职员关系图表 & 导演演员关系网络可视化
1. 公司职员关系图表 节点和边界数据 节点是指每个节点本身的数据,代表公司职工的名称:属性(Country).分类(Category)和地区(Region,给每个节点定义的属性数据).文件必须是.c ...
- tp5数据库链接
1在config/database.php中配置 1.1直接 return [ // 数据库类型 'type' => 'mysql', // 服务器地址 'hostname' => '12 ...
- Codeforces 853B Jury Meeting (差分+前缀和)
<题目链接> 题目大意: 有$ n(n<=1e5)$个城市和一个首都(0号城市),现在每个城市有一个人,总共有$ m (m<=1e5)$次航班,每个航班要么从首都起飞,要么飞到 ...
- HDU 2586 How far away ?(经典)（RMQ + 在线ST+ Tarjan离线) 【LCA】
<题目链接> 题目大意:给你一棵带有边权的树,然后进行q次查询,每次查询输出指定两个节点之间的距离. 解题分析:本题有多重解决方法,首先,可用最短路轻易求解.若只用LCA解决本题,也有三种 ...
- Shell学习之结合正则表达式与通配符的使用(五)
Shell学习之结合正则表达式与通配符的使用 目录 通配符 正则表达式与通配符 通配符 通配符的使用 正则表达式 正则表达式 正则表达式的使用 通配符 正则表达式与通配符 正则表达式用来在文件中匹配符 ...
- XamarinEssentials教程首选项Preferences判断项目是否存在
XamarinEssentials教程首选项Preferences判断项目是否存在 首选项也可以称为偏好设置.它以键值对的形式保存数据,适用于用户少量数据的存储.例如,将用户的个性化设置保存后,每次打 ...