<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <section class="bg-light" > <div class="container py-5"> <div class="text-center"> <h2> Our Team</h2> </div> <div class="row"> <div class="col-sm py-5 "> <div class="ourteam"> <div class=" card"> <img src="https://pixabay.com/get/55e0dd404e52ae14f6d1867dda35367b1c39dae05356774c_1920.jpg" class="img-card shadow" alt="..."> <div class="overlay1"> <div class="container py-5"> <div class="card-body py-5"> <h5 class="card-title text-light text-center">JANE </h5> <div class="py-5"> <a href="https://tsrtechsolutions.com"><i class="fab fa-instagram text-white mx-1"style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"><i class="fab fa-facebook text-white mx-1 " style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"> <i class="fab fa-twitter text-white mx-1" style="font-size:25px;"></i></a> <i class="fab fa-google-plus text-white mx-1 "style="font-size:25px;"></i></a> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm py-5 "> <div class="ourteam"> <div class=" card"> <img src="https://pixabay.com/get/5ee8dd464950b108feda8460da293277133bdbe55a5272_1920.jpg" class="img-card shadow" alt="..."> <div class="overlay1"> <div class="container py-5"> <div class="card-body py-5"> <h5 class="card-title text-light text-center">MARK</h5> <div class="py-5"> <a href="https://tsrtechsolutions.com"><i class="fab fa-instagram text-white mx-1"style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"><i class="fab fa-facebook text-white mx-1 " style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"> <i class="fab fa-twitter text-white mx-1" style="font-size:25px;"></i></a> <i class="fab fa-google-plus text-white mx-1 "style="font-size:25px;"></i></a> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm py-5 "> <div class="ourteam"> <div class=" card"> <img src="https://pixabay.com/get/55e5d3434351a814f6d1867dda35367b1c39dae05358794c_1920.jpg" class="img-card shadow" alt="..."> <div class="overlay1"> <div class="container py-5"> <div class="card-body py-5"> <h5 class="card-title text-light text-center">JACK </h5> <div class="py-5"> <a href="https://tsrtechsolutions.com"><i class="fab fa-instagram text-white mx-1"style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"><i class="fab fa-facebook text-white mx-1 " style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"> <i class="fab fa-twitter text-white mx-1" style="font-size:25px;"></i></a> <i class="fab fa-google-plus text-white mx-1 "style="font-size:25px;"></i></a> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm py-5 "> <div class="ourteam"> <div class=" card"> <img src="https://pixabay.com/get/54e3d3444357af14f6d1867dda35367b1c39dae052507049_1920.jpg" class="img-card shadow" alt="..."> <div class="overlay1"> <div class="container py-5"> <div class="card-body py-5"> <h5 class="card-title text-light text-center">CHRIS </h5> <div class="py-5"> <a href="https://tsrtechsolutions.com"><i class="fab fa-instagram text-white mx-1"style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"><i class="fab fa-facebook text-white mx-1 " style="font-size:25px;"><br></i></a> <a href="https://tsrtechsolutions.com"> <i class="fab fa-twitter text-white mx-1" style="font-size:25px;"></i></a> <i class="fab fa-google-plus text-white mx-1 "style="font-size:25px;"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

.ourteam{ width: 230px !important; height: 330px !important; } .overlay1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(0, 0, 0, 0.39); } .ourteam:hover .overlay1 { opacity: 1; } .img-card { height: 100%; width: 100%; color:rgba(128, 128, 128, 0.212); border-color: lightslategrey; box-sizing: border-box; }