效果

比列使用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制作列表鼠标移动覆盖透明层的更多相关文章

  1. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  2. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  3. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  4. 9种CSS3 blend模式制作的鼠标滑过图片标题特效

    这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...

  5. web 开发 css 默认值列表

    css默认值列表 HTML标签CSS属性默认值汇总 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默 ...

  6. 跟着辛星一起用CSS美化商品列表

    说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受.特别有成就感,好啦,今天就分享一期自己用C ...

  7. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  8. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  9. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

随机推荐

  1. Openstack1 云计算与虚拟化概念

    一.云概念 二.虚拟化,云计算不等于虚拟化,但是云计算需要用到虚拟化的技术 1.服务器虚拟化 2.桌面虚拟化 3.应用虚拟化 三.区别 1.虚拟化是具体的技术. 2.云计算是交付使用的一种模式

  2. P1441 砝码称重 DFS回溯+DP

    题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 请注意,砝码只能放在其中一边. 输入输出格式 输入格式: 输入文件weig ...

  3. sql 的一些总结

    如果用到“每”  就要用到group  by   例:每个部门有多少人,就要用到分组技术 聚合函数一般作用在多条记录上 having 是分组厚的筛选条件,分组厚的数据组内再筛选,where 则是在分组 ...

  4. 搭建TensorFlow中碰到的一些问题（TensorBoard不是内部或外部指令也不是可运行的程序）~

    一.windows10环境+pip python软件包(最新版)+Pycharm软件(过段时间在弄下CUDA和GPU吧) 直接使用pip指令来安装tensorflow软件(如果很久没有更新pip软件包 ...

  5. Apache系列：Apache的全局配置

    配置文件组成: 整个配置文件由3段组成: (1)全局配置:对主服务器或虚拟机都有效,且有些功能是服务器自身工作属性: (2)主服务器:主站属性: (3)虚拟主机:虚拟主机及属性定义 注:第二段和第三段 ...

  6. Typescript 常见的几种函数重载方法详解与应用示例

    所谓的重载,其实就是使用相同的函数名,传入不同数量的参数或不同类型的参数,以此创建出多个方法或产生不同结果. 1. 最常见的,也就是根据定义傻瓜式地判断参数类型与数量 function showPer ...

  7. sql - 递归update

    declare v_rlt ):; l_sql ); -- variable that contains a query l_c sys_refcursor; -- cursor variable(w ...

  8. shell下获取系统时间

    shell下获取系统时间的方法直接调用系统变量 获取今天时期:`date +%Y%m%d` 或 `date +%F` 或 $(date +%y%m%d) 获取昨天时期:`date -d yesterd ...

  9. C# JSON 转换

    // using System.Web.Script.Serialization; var jser = new JavaScriptSerializer(); var json = jser.Ser ...

  10. iOS12系统应用发送普通邮件构建邮件

    iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...