Animated Profile Card Design in HTML and CSS

Hello readers, Today in this blog you'll learn how to create an Animated Profile Card using only HTML & CSS. Previously I have shared a Responsive Navbar using CSS Flexbox, now it's time to create a Profile Card Design with Hover Animation in HTML & CSS.

Cards are surfaces that display contents and actions on a particular topic. They should be easy to scan for appropriate and actionable information. Components, like text and images, should be placed on them.

As you can see in the image, this is a Profile Card using HTML & CSS. This is a simple CSS card. 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 saying. You can watch a full video tutorial on this program (Animated Profile Card Design).

Video Tutorial of Animated Profile Card Design in HTML CSS



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 program (Animated Profile Card Design). 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 program (Animated Profile Card Design). Let's a few talks about the main tags and codes of this card. 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.

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. Then I created <span> tag with the font awesome icon class name for social icon.

In the CSS File, first 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.

To create this program (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:

CSS FILE:


Thanks for visiting, Keep visiting.


2 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post