DEV Community

Cover image for Animated Profile Card UI Design with Hover Animation in HTML CSS & JavaScript
CodingNepal
CodingNepal

Posted on • Edited on

1

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

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 a 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.

You can download the source code files through the given link. Click here to download source code files.

You might like this:

Responsive Testimonials Section
Responsive Owl-carousel Slider
Animated Blog UI Card with Slider
Pure CSS Card with 3D Flip on Hover

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs