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 ...

随机推荐

netty02(接受消息以后进行返回)
到这里接着上一篇netty01开始,没看过的可以点进去看一下再来首先来说一下 ByteBuf 这个类吧,这个类是netty里面提供的,接受信息和返回信息格式都是它: ByteBuf 是一个抽 ...
067 HA与updateStateByKey结合
是HA与updateStateByKey相结合的程序. 有点问题,有点奇怪,重启项目后运行没有问题,但是第三次启动的时候,就不会在打印数据了,有点问题. 1.程序 package com.stream ...
CLR Via第一章知识点整理（3）CLR执行程序集的IL代码
在了解CLR运行之前让我们先简单了解一下IL 除了编译器编译的IL代码,IL也是一种汇编语言,也就是说我们可以直接编写IL代码,当然也有对应的IL编译器,值得一提的是对于面向CLR的其他语言,CLR只 ...
webstorm离线装载Material Theme UI
首先说说需求,由于直接用webstorm听说VS挺火的,但是初恋的感觉是其他任何编辑器无法替代的瞎说了一些话,新公司内网开发,用的是vscode,但是我还是喜欢用webstorm,连不上网,所以不能 ...
gdb windbg and od use
gdb aslr -- 显示/设置 gdb 的 ASLR asmsearch -- Search for ASM instructions in memory asmsearch "int ...
Farewell Party-构造
Farewell Party 思路 : 转换思路 ,有 a [ i ] 个不相等的 ,那么至少得有 n - a [ i ]个与它相等的. 但是有可能与它拥有相同数目的有很多. 但是为了能够最终分配成 ...
SpringBoot使用LomBok
Lombok是什么?它是一个能帮我们消除那些必须要写但是重复的代码,比如setter,getter,构造函数之类的方法. 首先先简单说一下idea安装lombok,有2种方法: 1.直接从http:/ ...
Summary
PDF 暑假开始准备转移博客,试了几个都不怎么满意(我还去试了下LineBlog 不知道那时候在想什么..),屯着一堆文章,,到时候一起发了现在暂时转移至WordPress,不过还在完善中,预计.. ...
JavaScript基础笔记（十二）Ajax
Ajax 一.XMLHttpRequest对象一)XHR用法 var xhr = new XMLHttpRequest(); //open()方法,参数一:发送方法,参数二:请求的URL,参数三:是 ...
php 压缩文件 zip
<?php class PHPZip { private $ctrl_dir = array(); private $datasec = ...

css-animate制作列表鼠标移动覆盖透明层

css-animate制作列表鼠标移动覆盖透明层的更多相关文章

随机推荐

热门专题