Pure CSS3 team members introduce animation special effects examples

Brief tutorial

This is a team member introduction animation special effect produced using pure CSS3. This special effect uses Bootstrap's grid system for layout. When the mouse slides over the picture of each team member, the description information will have some animation effects.

Usage method

Introduce bootstrap style files into the page.

<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">

HTML structure

The HTML structure of this special effect is as follows:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <img src="images/img-1.jpg" alt="">
                <div class="team-content">
                    <h3 class="title">Williamson</h3>
                    <span class="post">web developer</span>
                    <ul class="social-links">
                        <li><a href="#"><i class="fa fa-facebook"></i> </a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i> </a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i> </a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
  
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <img src="images/img-2.jpg" alt="">
                <div class="team-content">
                    <h3 class="title">kristina</h3>
                    <span class="post">Web Designer</span>
                    <ul class="social-links">
                        <li><a href="#"><i class="fa fa-facebook"></i> </a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i> </a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i> </a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS style

Add the following CSS style to this special 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 screen and (max-width: 767px){
    .our-team .team-content:before,
    .our-team .team-content:after{
        height: 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 screen and (max-width: 480px){
    .our-team .title:before,
    .our-team .title:after{
        top: -83px;
    }
}

For more articles related to animation special effects examples introduced by pure CSS3 team members, please pay attention to the PHP Chinese website!