our team style : demo 38

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.

Kristiana

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.

HTML

                        

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.

Kristiana

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.

CSS

                        .our-team{
                            text-align: center;
                        }
                        .our-team .team-image{
                            width: 80%;
                            height: 80%;
                            border-radius: 50%;
                            border: 5px solid #d7d7d7;
                            position: relative;
                            margin: 0 auto;
                            transition: all 0.5s ease 0s;
                        }
                        .our-team:hover .team-image{
                            border-color: #1fc5b6;
                        }
                        .our-team .team-image img{
                            width: 100%;
                            height: auto;
                            border-radius: 50%;
                        }
                        .our-team .social{
                            margin: 0;
                            padding: 0;
                            list-style: none;
                            width: 100%;
                            position: absolute;
                            top: 45%;
                            opacity: 0;
                            transform: scale(0);
                            transition: all 0.5s ease 0s;
                        }
                        .our-team:hover .social{
                            opacity: 1;
                            transform: scale(1);
                            animation: 0.5s ease 0s normal 1 bounce;
                        }
                        .our-team .social li{
                            display: inline-block;
                            border-radius: 50%;
                        }
                        .our-team .social li:first-child{
                            margin-left: -30px;
                            float: left;
                        }
                        .our-team .social li:last-child{
                            margin-right: -30px;
                            float: right;
                        }
                        .our-team .social li a{
                            display: block;
                            width: 50px;
                            height: 50px;
                            line-height: 47px;
                            border-radius: 50%;
                            background-color: #fff;
                            font-size: 25px;
                            color: #1fc5b6;
                            border: 3px solid #1fc5b6;
                        }
                        .our-team .team-content{
                            padding: 10px 50px;
                        }
                        .our-team .title{
                            font-size: 24px;
                            color: #222;
                            margin: 0 0 10px 0;
                        }
                        .our-team .description{
                            font-size: 14px;
                            color: #555;
                            line-height: 25px;
                            margin: 0;
                        }
                        @keyframes bounce{
                            0%{
                                opacity:0;
                                -webkit-transform:scale(.3);
                                transform:scale(.3)
                            }
                            50%{
                                opacity:1;
                                 -webkit-transform:scale(1.05);
                                 transform:scale(1.05)
                            }
                            70%{
                                -webkit-transform:scale(.9);
                                transform:scale(.9)
                            }
                            100%{
                                opacity:1;
                                -webkit-transform:scale(1);
                                transform:scale(1)
                            }
                        }
                        @media screen and (max-width: 990px){
                            .our-team{ margin-bottom: 20px; }
                        }
                    
License Terms