Epic Bootstrap

Team Grid

Photo gallery for introducing your project's team members. Minimalistic design with personal and business details shown on hover.

Result
HTML
CSS

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="team-grid">
        <div class="container">
            <div class="intro">
                <h2 class="text-center">Team </h2>
                <p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet.  </p>
            </div>
            <div class="row people">
                <div class="col-md-4 col-lg-3 item">
                    <div class="box" style="background-image:url(assets/img/1.jpg)">
                        <div class="cover">
                            <h3 class="name">Ben Johnson</h3>
                            <p class="title">Musician</p>
                            <div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-3 item">
                    <div class="box" style="background-image:url(assets/img/2.jpg)">
                        <div class="cover">
                            <h3 class="name">Emily Clark</h3>
                            <p class="title">Artist </p>
                            <div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-3 item">
                    <div class="box" style="background-image:url(assets/img/3.jpg)">
                        <div class="cover">
                            <h3 class="name">Carl Kent</h3>
                            <p class="title">Stylist </p>
                            <div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-3 item">
                    <div class="box" style="background-image:url(assets/img/4.jpg)">
                        <div class="cover">
                            <h3 class="name">Felicia Adams</h3>
                            <p class="title">Model </p>
                            <div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

.team-grid {
  color:#313437;
  background-color:#fff;
}

.team-grid p {
  color:#7d8285;
}

.team-grid h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .team-grid h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.team-grid .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto;
}

.team-grid .intro p {
  margin-bottom:0;
}

.team-grid .people {
  padding:50px 0;
}

.team-grid .item {
  margin-bottom:30px;
}

.team-grid .item .box {
  text-align:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  height:280px;
  position:relative;
  overflow:hidden;
}

.team-grid .item .cover {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(31,148,255,0.75);
  transition:opacity 0.15s ease-in;
  opacity:0;
  padding-top:80px;
  color:#fff;
  text-shadow:1px 1px 1px rgba(0,0,0,0.15);
}

.team-grid .item:hover .cover {
  opacity:1;
}

.team-grid .item .name {
  font-weight:bold;
  margin-bottom:8px;
}

.team-grid .item .title {
  text-transform:uppercase;
  font-weight:bold;
  color:#bbd8fb;
  letter-spacing:2px;
  font-size:13px;
  margin-bottom:20px;
}

.team-grid .social {
  font-size:18px;
}

.team-grid .social a {
  color:inherit;
  margin:0 10px;
  display:inline-block;
  opacity:0.7;
}

.team-grid .social a:hover {
  opacity:1;
}

Team Grid

Bootstrap Studio Exclusive

To get the most out of Epic Bootstrap, sign in using your Google Account.