Animated Profile Card Design in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Animated Profile Card using only HTML & CSS.

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

As you can see in the image, this is a Profile Card using HTML & CSS. This is a simple CSS card. This card is not responsive that means this card is not shown properly in the mobile devices. If you want responsive cards that are perfectly shown in the mobile and tablet devices then click here. I have already shared many responsive CSS cards.

Basically, In this card, there is a cool hover animation on the card. That means at first there is only an image but when you hover on that image, the image will slide up, and then the bottom texts and center social buttons are visible.

If you’re feeling difficult to understand what I am actually saying. You can watch a full video tutorial on this program or design below.

If you are a beginner and have some basic knowledge of HTML & CSS then you can make this card fully responsive and can use this card in your project according to your requirements. If you want to get the source code of this animated card. You can easily get the source codes of this program. To get the source codes you just need to scroll down. 

Animated Profile Card Design in HTML CSS [Source Codes]

As always, before sharing the codes of this card. Let’s a few talk about the main tags and codes of this card. As you already know, this card is fully based on HTML & CSS. At first in the HTML File, I created a <div> with the class name “container” and placed all other tags inside it. Then I created another <div> with the class name “image” and placed a <img> tag inside it. the <img> tag is an inline element used to designate a holding space for linked images. It is useful when you want to link pictures, diagrams, or illustrations to your web pages, either from your collection or another website. 
After that, I created another <div> and placed two tags inside it. At last, I created a <ul> tag for the social icon list and placed five <li> tag inside it. Inside <li> tag I created <a> anchor tag. An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link. Then I created <span> tag with the font awesome icon class name for social icon.
In the CSS File, First using * selector I reset default margins and paddings to 0; which automatically browser takes. I used google font (Poppins) there. Then I placed all elements at the center using the CSS grid property. After that, I did basic styling to create a card like give height-width, colors, and much more. Similarly, I placed content to tag like name and about text to the bottom of the card. Then I also did basic styling to social media buttons and placed them at the center of the cards. Then I hide all icons with giving opacity 0; and give opacity 1; to icons for visible them when user hover on the card. 
There are many things I left. Because I can’t say all things in writing. I’m just talking about the main concept and things. Don’t worry you’ll understand all codes and programs after getting the source code of this program.
To create this Animated Profile Card Design. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

<!DOCTYPE html>
<!-- Created By StyleMyCoding-->
  <head>
    <meta charset="utf-8">
    <title>Animated Profile Card | StyleMyCoding</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
      </div>
<div class="content">
        <div class="info">
          <h2>
Andrew Neil</h2>
<span>Web Developer</span>
        </div>
</div>
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-github"></span></a></li>
<li><a href="#"><span class="fab fa-youtube"></span></a></li>
</ul>
</div>
</body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.container:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.container .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.container:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.container:hover .image img{
  opacity: 0.7;
}
.container:hover .image{
 transform: translateY(-100px);
}
.container ul{
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  list-style: none;
}
ul li{
  margin: 0 5px;
}
ul li a{
  display: block;
  height: 50px;
  width: 50px;
  color: #000;
  line-height: 50px;
  font-size: 20px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(200px);
  background: #fff;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.container:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.container:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.container:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.container:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.container:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.container .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}

Leave a Reply