Pure CSS3 Team introduces animation effect instances

Brief tutorials

This is a team who uses pure CSS3 to introduce animation effects. The effect is laid out using the bootstrap grid system, where the description will have some animated effects when the mouse hovers over the pictures of each team member.

How to use

Introduce the bootstrap style file in the page.

<link rel= "stylesheet" type= "Text/css" href= "Path/to/css/bootstrap.min.css" >

HTML structure

The HTML structure for this effect is as follows:

<div class= "Container" > <div class= "Row" > <div class= "col-md-3 col-sm-6" > <div C lass= "Our-team" >  <div class= "team-content" &G                    T                    

CSS Styles

Add the following CSS style to the effect.

. our-team{Text-align:center;    Overflow:hidden; Position:relative;}.    Our-team img{width:100%; Height:auto;}.    Our-team. team-content{width:100%;    Background: #3f2b4f;    Color: #fff;    padding:15px 0 10px 0;    Position:absolute;    bottom:0;    left:0;    Z-index:1; Transition:all 0.3s ease 0s;}. Our-team:hover. team-content{padding-bottom:40px;}.    Our-team. Team-content:before,.our-team. team-content:after{content: "";    width:60%;    height:38px;    Background: #3f2b4f;    Position:absolute;    Top: -18px;    Transform:rotate (15DEG); Z-index:-1;}. Our-team. team-content:before{left:-3%;}.    Our-team. team-content:after{right:-3%; Transform:rotate ( -15deg);}.    Our-team. title{font-size:20px;    font-weight:600;    Text-transform:capitalize;    margin:0 0 7px 0; Position:relative;}.    Our-team. Title:before,.our-team. title:after{content: "";    width:7px;    height:93px;    Background: #ff5543; Position:absoluTe    Top: -78px;    Z-index:-2; Transform:rotate ( -74deg);}. Our-team. title:before{left:32%;}.    Our-team. title:after{right:32%; Transform:rotate (74deg);}.    Our-team. post{Display:block;    font-size:13px;    Text-transform:capitalize; margin-bottom:8px;}.    Our-team. social-links{List-style:none;    padding:0 0 15px 0;    margin:0;    Position:absolute;    Bottom: -40px;    right:0;    left:0; Transition:all 0.5s ease 0s;}. Our-team:hover. social-links{bottom:0;}. Our-team. Social-links li{Display:inline-block;}.    Our-team. social-links Li a{display:block;    font-size:16px;    Color: #aad6e1;    margin-right:6px; Transition:all 0.5s ease 0s;}. Our-team. social-links li:last-child a{margin-right:0;}. Our-team. social-links li a:hover{color: #ff5543;}    @media only screen and (max-width:990px) {. our-team{margin-bottom:30px;}        . Our-team. Team-content:before,. Our-team. team-content:after{height:50px;Top: -24px;        }. Our-team. Title:before,. Our-team. title:after{top: -85px;    height:102px;    }. Our-team. title:before{left:35%;    }. Our-team. title:after{right:35%; }} @media only screens and (MAX-WIDTH:767PX) {. Our-team. Team-content:before,. Our-team. team-content:after{h    eight:75px;    }. Our-team. team-content:before{transform:rotate (8DEG);    }. Our-team. team-content:after{transform:rotate ( -8DEG);        }. Our-team. Title:before,. Our-team. title:after{width:10px;        Top: -78px;    height:102px;        }. Our-team. title:before{left:42.5%;    Transform:rotate ( -82DEG);        }. Our-team. title:after{right:42.5%;    Transform:rotate (82DEG);    }} @media only screens and (max-width:480px) {. Our-team. Title:before,. Our-team. title:after{top: -83px; }}