Profile Cards With Hover Effect in CSS

Profile Cards With Hover Effect in CSS
Project: Profile cards with hover effect
Author: Mike Young
Edit Online: View on CodePen
License: MIT

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.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply