This CSS code snippet helps you to create profile cards with hover effect. It comes with modern UI design containing circular profile picture, name, description and social iconic links. The cards uses Bootstrap CSS for basic card structure and grid layouts. You can integrate these cards to display team members on your team page.
How to Create Profile Cards With Hover Effect
First of all, load the Bootstrap and Font Awesome CSS into the head tag of your HTML document.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
After that, create the HTML structure for team cards as follows:
<div class="container">
<div class="row ">
<div class="col-lg-12">
<div>
<div class="col-md-4">
<div class="profile-card text-center">
<img class="img-responsive" src="https://images.unsplash.com/photo-1454678904372-2ca94103eca4?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<div class="profile-info">
<img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">
<h2 class="hvr-underline-from-center">Rod<span>Digital / Design Consultant</span></h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
<a href="mailto:michael_y@live.co.uk"><i class="fa fa-envelope-o fa-2x"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="profile-card text-center">
<img class="img-responsive" src="https://images.unsplash.com/photo-1451188502541-13943edb6acb?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<div class="profile-info">
<img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">
<h2 class="hvr-underline-from-center">Adam<span>Developer</span></h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
<a href="mailto:michael_y@live.co.uk"><i class="fa fa-envelope-o fa-2x"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="profile-card text-center">
<img class="img-responsive" src="https://images.unsplash.com/photo-1447877085163-3cce903855cd?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<div class="profile-info">
<img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">
<h2 class="hvr-underline-from-center">Mike<span>Web Designer</span></h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
<a href="mailto:michael_y@live.co.uk"><i class="fa fa-envelope-o fa-2x"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Style the cards using the following CSS styles:
body {
background-color: #C0E5D9;
}
.container {
padding: 20px;
}
.profile-card {
background-color: #222222;
margin-bottom: 20px;
}
.profile-pic {
border-radius: 50%;
position: absolute;
top: -65px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
max-width: 100px;
transition: all 0.4s;
}
.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;
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;
transition-property: all;
transition-duration: 0.2s;
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;
border-radius: 0;
}
That’s all! hopefully, you have successfully created profile cards with hover effect in CSS. If you have any questions or suggestions, feel free to comment below.
