our team style : demo 34

Williamson

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

Kristiana

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

Steve Thomas

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

Miranda joy

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

HTML

                        

Williamson

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

Kristiana

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing.

CONTACT ME

CSS

                        .our-team .pic{
                            position: relative;
                            overflow: hidden;
                        }
                        .our-team .pic img{
                            width: 100%;
                            height: auto;
                        }
                        .our-team .over-layer{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            bottom: -100%;
                            left: 0;
                            background: rgba(156, 136, 185, 0.7);
                            transition: all 0.5s ease 0s;
                        }
                        .our-team:hover .over-layer{
                            bottom: 0;
                        }
                        .our-team .over-layer:before{
                            content: "";
                            width: 90%;
                            height: 0;
                            position: absolute;
                            top: 5%;
                            left: 5%;
                            border-top: 5px solid rgba(255,255,255,0.7);
                            border-left: 5px solid rgba(255,255,255,0.7);
                            opacity: 0;
                            transition: all 0.5s ease 0.5s;
                        }
                        .our-team:hover .over-layer:before{
                            opacity: 1;
                            height: 90%;
                        }
                        .our-team .social-links{
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            text-align: center;
                            position: relative;
                            top: 45%;
                            transform: scale(0);
                            opacity: 0;
                            transition: all 0.5s ease 1s;
                        }
                        .our-team:hover .social-links{
                            opacity: 1;
                            transform: scale(1);
                        }
                        .our-team .social-links li{
                            display: inline-block;
                            margin-left: 5px;
                        }
                        .our-team .social-links li a{
                            width: 30px;
                            height: 30px;
                            line-height: 30px;
                            border-radius: 50%;
                            display: block;
                            font-size: 13px;
                            color: #fff;
                            background: rgba(11, 32, 56, 0.7);
                        }
                        .our-team .team-content{
                            background: #f3f5f7;
                            padding: 30px 25px;
                        }
                        .our-team .team-title{
                            font-size: 18px;
                            font-weight: 700;
                            color: #5d5e5e;
                            margin: 0 0 5px 0;
                        }
                        .our-team .post{
                            display: block;
                            font-size: 16px;
                            font-style: italic;
                            color: #898989;
                            margin-bottom: 15px;
                        }
                        .our-team .post:after{
                            content: "";
                            display: block;
                            width: 35px;
                            height: 3px;
                            background: #9c88b9;
                            margin-top: 7px;
                        }
                        .our-team .description{
                            font-size: 14px;
                            color: #898989;
                        }
                        .our-team .read{
                            display: inline-block;
                            font-size: 14px;
                            color: #fff;
                            text-transform: uppercase;
                            padding: 8px 8px 8px 50px;
                            background: #9c88b9;
                            z-index: 1;
                            position: relative;
                            transition: all 0.5s ease 0s;
                        }
                        .our-team .read:hover{
                            background: #6dc1b3;
                            text-decoration: none;
                            color: #000;
                        }
                        .our-team .read:after{
                            content: "";
                            width: 36px;
                            height: 100%;
                            background: #9c88b9;
                            position: absolute;
                            top: 0;
                            right: -18px;
                            transform: skewX(-45deg);
                            z-index: -1;
                            transition: all 0.5s ease 0s;
                        }
                        .our-team .read:hover:after{
                            background: #6dc1b3;
                        }
                        @media screen and (max-width: 990px){
                            .our-team{ margin-bottom: 20px; }
                        }
                    
License Terms