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; }}