Our Team with Animation Effect

Most Stylish out team Bootstrap HTML Component with attractive animation. This animation looks very elegant and it also has social media link with animation

Copy and Paste the code or Download and Use

You can use this Our Team with Animation Effect web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Our Team with Animation Effect by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2, Add the HTML Files to the Document
<section class="main-team">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/1.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-behance"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Daniel</h4>
                                    <span>Web Developer</span>
                                    <div class="line"></div>
                                    <span>albert@gmail.com</span>
                                    <span>420-254-2658</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/2.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-behance"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Zami Zen</h4>
                                    <span>Content Writer</span>
                                    <div class="line"></div>
                                    <span>albert@gmail.com</span>
                                    <span>420-254-2658</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/3.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-behance"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Albert Dell Rio</h4>
                                    <span>Web Designer</span>
                                    <div class="line"></div>
                                    <span>albert@gmail.com</span>
                                    <span>420-254-2658</span>
                                </div>
                            </div>
                        </div>
                    </div>

                     <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/8.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-behance"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Albert Dell Rio</h4>
                                    <span>Web Designer</span>
                                    <div class="line"></div>
                                    <span>albert@gmail.com</span>
                                    <span>420-254-2658</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</section>
3, Add the CSS Files at the Header of the Document
.main-team {
  padding-top: 20px;
}
@media screen and (max-width: 767.98px) {
  .main-team {
    height: 100%;
  }
}
.main-team .heading {
  display: inline-block;
  margin: 1.25rem 0;
  position: relative;
}
.main-team .heading h2 {
  font-size: 1.5rem;
  color: #222;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  display: block;
  font-weight: 600;
}
@media screen and (max-width: 575.98px) {
  .main-team .heading h2 {
    font-size: 1.25rem;
  }
}
.main-team .wrapper {
  margin: 1.25rem 0;
  display: block;
}
.main-team .wrapper .team-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 30px 0px rgba(0, 46, 40, 0.1);
  overflow: hidden;
}
.main-team .wrapper .team-card:hover figure img {
  transform: scale(1.1);
}
.main-team .wrapper .team-card:hover .social-media {
  opacity: 1;
  visibility: visible;
}
.main-team .wrapper .team-card:hover .content-box {
  background: #E31C25;
}
.main-team .wrapper .team-card:hover .content-box h4 {
  color: #fff;
}
.main-team .wrapper .team-card:hover .content-box span {
  color: #fff;
}
.main-team .wrapper .team-card:hover .content-box .line {
  background: #fff;
}
.main-team .wrapper .team-card figure {
  position: relative;
  margin: 0;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.main-team .wrapper .team-card figure img {
  width: 100%;
  transition: all ease 0.5s;
  transform: scale(1);
}
.main-team .wrapper .team-card figure .social-media {
  position: absolute;
  bottom: 1.875rem;
  right: 0;
  left: 0;
  padding: 0.625rem 1.25rem;
  display: block;
  z-index: 1;
  text-align: center;
  transition: all ease-in-out 0.5s;
  opacity: 0;
  visibility: hidden;
}
.main-team .wrapper .team-card figure .social-media ol {
  display: flex;
  padding: 0.75rem 1.125rem;
  background: #E31C25;
  position: absolute;
  right: 0;
  bottom: 0;
}
.main-team .wrapper .team-card figure .social-media ol li {
  display: inline-block;
  margin: 0 0.3125rem;
  position: relative;
  height: 2.25rem;
  width: 2.25rem;
  background-color: #fafafa;
  border-radius: 50%;
  line-height: 2.25rem;
  transition: all 0.5s;
  transform: scale(1);
  overflow: hidden;
}
.main-team .wrapper .team-card figure .social-media ol li:hover {
  transform: scale(1.1);
  background: #222;
}
.main-team .wrapper .team-card figure .social-media ol li:hover a {
  color: #fff;
  transform: scale(0.9);
}
.main-team .wrapper .team-card figure .social-media ol li a {
  color: #E31C25;
  font-size: 0.875rem;
  transition: all ease-in-out 0.6s;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
}
.main-team .wrapper .team-card .content-box {
  position: relative;
  padding: 1.25rem 1.5625rem;
  background: #fff;
  text-align: center;
  display: block;
  transition: all ease-in 0.5s;
}
.main-team .wrapper .team-card .content-box h4 {
  font-size: 1.25rem;
  color: #222;
  margin: 0.3125rem 0 0;
  display: inline-block;
  text-transform: capitalize;
  font-weight: 500;
  transition: all ease-in 0.5s;
}
@media screen and (max-width: 575.98px) {
  .main-team .wrapper .team-card .content-box h4 {
    font-size: 1.125rem;
  }
}
.main-team .wrapper .team-card .content-box span {
  display: block;
  margin: 0.3125rem 0;
  font-size: 0.9375rem;
  transition: all ease-in 0.5s;
}
.main-team .wrapper .team-card .content-box .line {
  display: inline-block;
  height: 0.0625rem;
  width: 100%;
  margin: 0.3125rem 0;
  background: #eaecec;
  transition: all ease-in 0.5s;
}

Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies