<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <br> <br> <div class="col-md-12"> <div> <div class="col-sm-4"> <div class="profile-card text-center"> <img class="img-responsive" src="https://lh6.googleusercontent.com/ABjZPv0sPUwds8ZjETXaFxLzf7q7LgfT8mLtxflVbPpqXdz3_cd1WbviAn-edmVjFkfykMFmMSR1Rs0=w1260-h693-rw"> <div class="profile-info"> <h2 class="hvr-underline-from-center">Loretta Calvert<span>Paralegal</span></h2> <div>Office: 1318-02 <br> Phone:714.992.7218 </div> <a href="lcalvert@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927218"><i class="fa fa-phone fa-2x"></i></a> </div> </div> </div> <div class="col-sm-4"> <div class="profile-card text-center"> <img class="img-responsive" src="https://lh3.googleusercontent.com/8yo1xRiKKcAN21CNYHZ1k59Ea_oPU2BN0mS8ZrgYHhMv0eJqF6uJroCDY2tp_6mphOsVAtiaDHEPdwo=w1260-h693-rw"> <div class="profile-info"> <h2 class="hvr-underline-from-center">Candice Cantrell<span>Computer Information Systems</span></h2> <div>Office: 1318-01 <br> Phone:714.992.7203 </div> <a href="lcalvert@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927203"><i class="fa fa-phone fa-2x"></i></a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="profile-card text-center"> <img class="img-responsive" src="https://lh3.googleusercontent.com/Tcv5RqnTtGSTfpSkYaBSz4luiV99M64VJLydkIzRp5EtetGHKqzGDY6aUkMkYO_MbSyxQG20H9Cxi-0=w1260-h693-rw"> <div class="profile-info"> <h2 class="hvr-underline-from-center">Anna Carlin<span>Computer Information Systems</span></h2> <div>Office: 1318-01 <br> Phone:714.992.7210 </div> <a href="acarlin@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927210"><i class="fa fa-phone fa-2x"></i></a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="profile-card text-center"> <img class="img-responsive" src="https://lh4.googleusercontent.com/fcc9lXrtH8Ml-tqg72rtHGCSJqK25ixf1Bxm4UAQZJXs7IAULSNAn3gUWHDX6NMqZ2zzGPwlelxndyI=w1260-h693-rw"> <div class="profile-info"> <h2 class="hvr-underline-from-center">Dale Craig<span>CIS Coordinator </span></h2> <div>Office: 511-01 <br> Phone:714.992.7204 </div> <a href="dcraig@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927204"><i class="fa fa-phone fa-2x"></i></a> </div> </div> <div class="col-sm-4"> <div class="profile-card text-center"> <img class="img-responsive" src="https://lh4.googleusercontent.com/fcc9lXrtH8Ml-tqg72rtHGCSJqK25ixf1Bxm4UAQZJXs7IAULSNAn3gUWHDX6NMqZ2zzGPwlelxndyI=w1260-h693-rw"> <div class="profile-info"> <h2 class="hvr-underline-from-center">Steve Dayton<span>Paralegal Coordinator</span></h2> <div>Office: 310-01 <br> Phone:714.992.7223 </div> <a href="sdayton@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927223"><i class="fa fa-phone fa-2x"></i></a> </div> </div> </div> </div> </div> </div>

body { background-color: #C0E5D9; } .container { padding: 20px; } .profile-card { background-color: #222222; margin-top:20%; margin-bottom: 20%; } .img-responsive {margin-top: 15px; margin-bottom: 15px; } .profile-info { color: #BDBDBD; padding: 25px; position: relative; margin-top: 15px; } .profile-info h2 { color: #E8E8E8; letter-spacing: 4px; padding-bottom: 12px; } .profile-info span { display: block; font-size: 12px; color: #4CB493; letter-spacing: 2px; } .profile-info a { color: #4CB493; } .profile-info i { padding: 15px 35px 0px 35px; } .profile-card:hover .profile-pic { transform: scale(1.1); } .profile-card:hover .profile-info hr { opacity: 1; } /* Underline From Center */ .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 52%; right: 52%; bottom: 0; background: #FFFFFF; border-radius: 50%; height: 3px; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .profile-card:hover .hvr-underline-from-center:before, .profile-card:focus .hvr-underline-from-center:before, .profile-card:active .hvr-underline-from-center:before { left: 0; right: 0; height: 1px; background: #CECECE; }