Animated Profile Card UI Design with Hover Animation in HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create an Animated Profile Card with Hover Animation using HTML CSS & JavaScript. Earlier I have shared a blog about how to create Responsive Profile Cards using only HTML & CSS. Now it's time to create Hover Animation on Card.

What is a card, exactly? Well, they come in all sorts of shapes and sizes, but common cards will include information or content such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example, product or client description.

Today in this video, I'll share with you this program (Profile Card UI Design with Hover Animation). At first, on the webpage, there is only an image with round border-color. But when you hover on that card, then the height and width of the card smoothly expand and show the contents of the card. I have also added transition-delay on social media buttons so the buttons will appear one by one.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Profile Card UI Design with Hover Animation).

Video Tutorial of the Card Hover Animation using HTML CSS



As you have seen the real animation of the card in the video as well you have seen when we click on the image, the image converts into full screen. There I used JavaScript to create that image clickable and converts into full screen.

If you're a beginner and you know HTML & CSS, then you can also create this type of card and add creative hover animation and effect. If you like this program (Profile Card UI Design with Hover Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:


Animated Profile Card UI Design [Source Codes]

As always, before sharing the codes of this program (Profile Card UI Design with Hover Animation). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with class name "container" and placed all other tags inside it. Then I created another <div> with the class name "wrapper" and placed card content inside. At last, I created some <a>, <div>, <button> tags for title, button, place and insert some text inside it.

In the CSS File, I placed all elements at the center then gave a particular height-width and linear-gradient background color to the card. Then I did basic styling to image, texts, buttons. After styling all elements, I have hidden all the contents of the card as well I reduced the width of the card. And I only show the contents and expand the width of the card when the user hovers on it.

To create this program (Profile Card UI Design with Hover Animation). 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.


4 Comments

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

  1. Thanku So Much Bro 😍 Your All Video Awesome ❤️❤️

    ReplyDelete
  2. Thanks...
    Loved all your contents
    Can you also post this with Bootstrap ?

    ReplyDelete

Post a Comment

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

Previous Post Next Post