Animated User Profile card design

A card or user profile card is a compact container or module that contains an image, title, description, and some other elements like buttons or links. In any type of card, we see related information grouped into visually organized blocks. A well-designed card makes it easy for users to scan and interact with the information. Today, we will share a snippet about a profile card that animates on hover. Below is a video tutorial based on this topic. Watch the video tutorial below for a better understanding.

Video Tutorial:

We hope you watched the above video tutorial on animated profile card design. The main purpose of using cards on a website is to make the website layout more organized and readable. Another reason why designers use this content in website design is its scalability. These cards can be scaled up or down in responsive designs. Cards can improve the user experience (UX) of a website. These CSS cards or user profile card designs help to grab the attention of users and support intuitive navigation, thereby increasing engagement. In short, a card helps to turn any cluttered content on a website into simple and elegant sections that increase aesthetic appeal.

This card can be used on any website that has dynamic or modular content. Large e-commerce platforms like Amazon or Etsy use the card feature to display their product listings. They present it in a grid format with images, titles, prices, and call-to-action buttons. Apart from e-commerce sites, many news and media sites, such as BBC, CNN, or Medium, use the card format to organize their articles. Portfolio websites like Behance and Dribbble are also using them as a visual preview of creative work. Animations can transform a simple design into an engaging visual experience that instantly grabs the attention of users. With this in mind, we have added a beautiful animation to the hover state of the card snippet we created. What will happen is that when we hover over the card, the image translates in the Y-direction and the related information, like name, designation, and social media links, comes up with an animation. It will return to its initial state when we remove the hover.

You May Also Like:

Animated User Profile card design [ Source Code ]:

To create this animated user profile card snippet, we need to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into those files. You can also download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated css cards</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">  
</head>
<body>
    
  <div class="wrapper">
    <div class="single-card">
      <div class="card">
        <div class="img-area">
          <img src="1.jpg" alt="">
        </div>
        <ul class="socials">
          <li>
            <a href="">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a href="">
              <i class="fa fa-instagram"></i>
            </a>
          </li>
          <li>
            <a href="">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a href="">
              <i class="fa fa-pinterest"></i>
            </a>
          </li>
        </ul>
        <div class="info">
          <h2>Melina James <br><span>Front-End Developer</span></h2>
        </div>
      </div>
    </div>

</body>
</html>

ADD CSS:

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	font-family: "Montserrat", sans-serif;
	background: #f4f4f4;
}
.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 50px auto;
}
.single-card {
	width: 400px;
	height: 500px;
	position: relative;
}
.card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 450px;
	transform: translate(-50%, -50%);
	overflow: hidden;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transition: 0.5s;
	border-radius: 25px;
}
.card .img-area {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: 0.5s;
}
.card:hover img {
	transition: 0.5s;
}
.card:hover .img-area {
	transform: translateY(-120px);
	transition: all 0.9s;
	z-index: -100;
}
.socials {
	position: absolute;
	top: 94%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: flex;
}
.socials li {
	list-style: none;
}
.socials li a {
	position: relative;
	display: block;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #333;
	font-weight: bold;
	margin: 0 15px;
	transition: 0.4s;
	transform: translateY(200px);
	opacity: 0;
}
.card:hover .socials li a {
	transform: translateY(0px);
	opacity: 1;
}
.card:hover li:nth-child(1) a {
	transition-delay: 0.3s;
}
.card:hover li:nth-child(2) a {
	transition-delay: 0.5s;
}
.card:hover li:nth-child(3) a {
	transition-delay: 0.7s;
}
.card:hover li:nth-child(4) a {
	transition-delay: 0.9s;
}
.info {
	position: absolute;
	bottom: -100%;
	left: 0;
	background: #f4f4f4;
	width: 100%;
	height: 130px;
	z-index: 1;
	padding: 10px;
	transition: .1s;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.info h2 {
	margin: 10px 0;
	padding: 0;
	text-align: center;
	color: #333;
}
.info h2 span {
	font-size: 14px;
}
.card:hover .info {
	bottom: 0;
	left: 0;
	transition-delay: 0.5s;
	opacity: 1;
}

Cards are a great way to organize content or information in a user-friendly and visually appealing way. In this digital world, creating a static web element is not conducive to the success of a website. This is why designers and developers add animation to a specific element of a web layout. CSS cards or user profiles are one of them because the subtle movements on hover make you feel alive and personalized. We hope you have collected the code. To learn more, click on the "Load More" button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated User Profile card design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated User Profile card design

Video Tutorial:

Animated User Profile card design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form