<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"> <div class="container"> <br> <br> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-reallife.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">Classes<span>Real-Life classes we hold</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-institution fa-3x"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-elearning.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">E-Learning<span>Learn at your own pace</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-tablet fa-3x"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-private.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">Private Classes<span>One-To-One lessons</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-camera fa-3x"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-corporate.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">Corporate Classes<span>Training for organizations</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-black-tie fa-3x"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-pcp.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">Professional Program<span>Training for organizations</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-graduation-cap fa-3x"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="profile-card text-center"> <img class="img-responsive" src="http://www.nikonian.com.my/img/2015Template/Courses/title-trip.jpg"> <div class="profile-info"> <h4 class="hvr-underline-from-center">Photography Trips<span>Training for organizations</span></h4> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <a href="http://www.nikonian.com.my/shopping/courses.asp?Course=reallife"><i class="fa fa-globe fa-3x"></i></a> </div> </div> </div> </div> </div> </div>

body { background-color: #cff7fe; } .container { padding: 20px; } .profile-card { background-color: #FFFFFF; margin-bottom: 20px; } .profile-pic { border-radius: 50%; position: absolute; top: -65px; left: 0; right: 0; margin: auto; z-index: 1; max-width: 100px; -webkit-transition: all 0.4s; transition: all 0.4s; } .profile-info { color: #000000; /* TEXT COLOR */ padding: 25px; position: relative; margin-top: 15px; } .profile-info h4 { color: #222222; /* TITLE font color */ letter-spacing: 4px; padding-bottom: 12px; } .profile-info span { display: block; font-size: 12px; color: #1c9ca1; /*tag line font color */ letter-spacing: 2px; } .profile-info a { color: #1c9ca1; /* Clickable FA Icons */ } .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: red; 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: #fcdf1e; /*The line AFTER hoevering */ }