Bootsrtap clean team section

by Grobbert

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<section class="section">
    <div class="container">
		
		<div class="section_header">
			<h2 class="title section_title">Our Expert Team</h2>
			
		<span class="section_hint">Lorem ipsum dolor samet</span> </div>
        <div class="row">
			<div class="section_content teamy-team">
				<div class="col-md-3">
					<div class="teamy teamy_style1 teamy_mask-circle">
						<div class="teamy_layout">
							<div class="teamy_preview"> <img src="http://bestjquery.com/tutorial/hover-effect/demo206/images/img-1.jpg" class="teamy_avatar" alt="The demo photo"> </div>
							<div class="teamy_back">
								<div class="teamy_back-inner"> <a href="#0" class="social"> <i class="fa fa-facebook"></i> </a> <a href="#0" class="social"> <i class="fa fa-dribbble"></i> </a> <a href="#0" class="social"> <i class="fa fa-twitter"></i> </a> <a href="#0" class="social"> <i class="fa fa-envelope-o"></i> </a> </div>
							</div>
						</div>
						<div class="teamy_content">
							<h3 class="teamy_name">Suzan Lois</h3>
						<span class="teamy_post">CEO/Founder</span> </div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="teamy teamy_style1 teamy_mask-circle">
						<div class="teamy_layout">
							<div class="teamy_preview"> <img src="http://bestjquery.com/tutorial/hover-effect/demo206/images/img-1.jpg" class="teamy_avatar" alt="The demo photo"> </div>
							<div class="teamy_back">
								<div class="teamy_back-inner"> <a href="#0" class="social"> <i class="fa fa-facebook"></i> </a> <a href="#0" class="social">...

CSS

.teamy {
 position: relative;
 z-index: 1;
 overflow: hidden;
}
.teamy_layout {
 position: relative;
}
.teamy_preview {
 position: relative;
 overflow: hidden;
}
.teamy_avatar {
 display: block;
 max-width: 100%;
 position: relative;
 z-index: 1;
}
.teamy_preview:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
}
.teamy_back {
 width: 100%;
 /* height: 100%;*/
 box-sizing: border-box;
 opacity: 0;
 will-change: opacity;
 display: flex;
 flex-direction: column;
 justify-content: center;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 3;
}
.teamy:hover .teamy_back {
 opacity: 1;
 height: 100%;
 transition: opacity .4s cubic-bezier(0.71, 0.05, 0.29, 0.9) .2s;
}
.teamy_name {
 margin-top: 0;
 margin-bottom: 0;
}
.teamy_post {
 display: block;
}
/*
 * 2. visual styles
 */

/* common styles for visual styles */

.teamy_back {
 padding-left: 10px;
 padding-right: 10px;
 text-align: center;
}
.teamy_content {
 padding: 20px;
}
.teamy_name {
 font-size: 15px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #282828;
 font-family: 'montserratbold';
}
.teamy_post {
 margin-top: .5em;
 font-size: .8em;
 text-transform: capitalize;
 color: #6f6f6f;
}
/* style 1 */

.teamy_style1 {
 text-align: center;
}
.teamy_style3 .teamy_name {
 font-size: 2em;
}
/*
 * 3. masks
 */

/* mask circle */

.teamy_mask-circle .teamy_preview:before {
 width: 0;
 height: 0;
 padding: 25%;
 border-radius: 50%;
 transition: transform .3s ease, opacity .3s ease-out;
 will-change: opacity, transform;
 opacity: 0;
 transform: translate(-50%, -50%) scale(0);
}
.teamy_mask-circle:hover .teamy_preview:before {
 opacity: 1;
 transform: translate(-50%, -50%) scale(4);
 transition-duration: .6s;
}
/* mask triangle */

.teamy_mask-triangle .teamy_preview:before {
 width: 100%;
 height: 100%;
 opacity: 0;
 -webkit-clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
 clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
 transition-property: transform, opacity;
...