July 25, 2021

Our Team

<div class="container-fluid mt-5">
      <div class="row"> 
   <div class="our-team col-lg-4 col-md-6 col-sm-12">
        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms">
          <div class="image">
            <img  src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/4.jpg">                        						<div class="overflow-box">
              <ul class="social-box">
                            	                                <li><a href="#" target="_blank"><i class="fa fa fa-facebook"></i></a></li>
                                                                <li><a href="#" target="_blank"><i class="fa fa fa-twitter"></i></a></li>
                                							</ul>
            </div>
                        					</div>
          <div class="lower-box">
            <h3><a href="#">Aryan Joe</a></h3>
            <div class="designation">Web Designer</div>
          </div>
        </div>
      </div>
      <div class="our-team col-lg-4 col-md-6 col-sm-12">
        <div class="inner-box wow fadeInUp" data-wow-delay="0ms">
          <div class="image">
            <img  src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/5.jpg">                        						<div class="overflow-box">
              <ul class="social-box">
                            	                                <li><a href="#" target="_blank"><i class="fa fa fa-facebook"></i></a></li>
                                                                <li><a href="#" target="_blank"><i class="fa fa fa-twitter"></i></a></li>
                                							</ul>
            </div>
                        					</div>
          <div class="lower-box">
            <h3><a href="#">Loe Wonger</a></h3>
            <div class="designation">Web Develoer</div>
          </div>
        </div>
      </div>
      <div class="our-team col-lg-4 col-md-6 col-sm-12">
        <div class="inner-box wow fadeInRight" data-wow-delay="0ms">
          <div class="image">
            <img  src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/3.jpg">                        						<div class="overflow-box">
              <ul class="social-box">
                            	                                <li><a href="#" target="_blank"><i class="fa fa fa-facebook"></i></a></li>
                                                                <li><a href="#" target="_blank"><i class="fa fa fa-twitter"></i></a></li>
                                							</ul>
            </div>
                        					</div>
          <div class="lower-box">
            <h3><a href="#">Bailey Smith</a></h3>
            <div class="designation">Web Designer</div>
          </div>
        </div>
      </div>
    </div>
  </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <style>
        .our-team{
  position:relative;
}

.our-team .inner-box{
  position:relative;
}

.our-team .inner-box .image{
  position:relative;
  overflow:hidden;
  border-radius:4px;
}

.our-team .inner-box .image img{
  position:relative;
  width:100%;
  display:block;
}

.our-team .inner-box .image .overflow-box{
  position:absolute;
  left:0px;
  top:0px;
  bottom:0px;
  right:0px;
}

.our-team .inner-box .image .overflow-box:before{
  position:absolute;
  content:'';
  left:0px;
  bottom:0px;
  width:100%;
  height:0px;
  transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  background-color:rgba(15,26,44,0.70);
}

.our-team .inner-box:hover .image .overflow-box:before{
  height:100%;
}

.our-team .inner-box .image .overflow-box .social-box{
  position:absolute;
  left:0px;
  bottom:100px;
  right:0px;
  text-align:center;
  opacity:0;
  transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}

.our-team .inner-box:hover .image .overflow-box .social-box{
  opacity:1;
  bottom:45px;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

.our-team .inner-box .image .overflow-box .social-box li{
  position:relative;
  margin:0px 4px;
  display:inline-block;
}

.our-team .inner-box .image .overflow-box .social-box li a{
  position:relative;
  width:44px;
  height:44px;
  color:#ea3a60;
  line-height:44px;
  text-align:center;
  border-radius:50%;
  display:inline-block;
  background-color:#ffffff;
  transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
  -ms-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
}

.our-team .inner-box .image .overflow-box .social-box li a:hover{
  color:#ffffff;
  background-color:#ea3a60;
}

.our-team .inner-box .lower-box{
  position:relative;
  padding-top:28px;
  text-align:center;
}

.our-team .inner-box .lower-box h3{
  position:relative;
  font-size:20px;
  font-weight:600;
  font-family: 'Poppins', sans-serif;
  line-height:1.3em;
}

.our-team .inner-box .lower-box h3 a{
  position:relative;
  color:#414d60;
  transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
  -ms-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
}

.our-team .inner-box .lower-box h3 a:hover{
  color:#ea3a60;
}

.our-team .inner-box .lower-box .designation{
  position:relative;
  color:#7c8799;
  font-size:15px;
  margin-top:6px;
}
    </style>

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
   <script>
             new WOW().init();
             </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *