Hello readers, Today In this article I am going to show you How To Create Animated Profile Card UI Design using HTML & CSS. This type of Animated Profile Card is used for website Card Design. One of the most beautiful and good-looking designs.
You easily create this Animated Profile Card UI Design using HTML & CSS then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Animated Profile Card
Normally In the profile card box show picture and card title. And website background color is gradient. When I click the box profile box is large and shows the profile details like posts and followers numbers with two-button. Overall the profile card is good-looking.
Watch the video tutorial to create Animated Profile Card
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step. So you can learn how to make this beautiful Animated Profile Card design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Profile card hover effect. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Automatic Image Slider Using HTML, CSS & JS
- Floating Action Menu Using HTML CSS & JS
- How To Create Login Form In HTML CSS & JS
Animated Profile Card UI Design | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile Card</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="pb"></div>
<div class="info">
<h1>Alina Smith</h1>
<h2>Senior UX/UI Designer</h2>
</div>
<div class="detail">
<div class="col">
<h3>342</h3>
<h4>Posts</h4>
</div>
<div class="col">
<h3>120k</h3>
<h4>Followers</h4>
</div>
<div class="col">
<h3>285</h3>
<h4>Following</h4>
</div>
</div>
<div class="buttons">
<button id="follow">Follow</button>
<button id="message">Message</button>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: rgb(241,169,91);
background: linear-gradient(45deg, rgba(241,169,91,1) 27%, rgba(180,86,235,1) 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1{
font-weight: 500;
font-size: 23px;
}
h2{
font-weight: 500;
font-size: 15px;
color: darkgrey;
}
h3{
font-weight: 500;
font-size: 18px;
}
h4{
font-weight: 500;
font-size: 14px;
color: darkgrey;
}
.card{
position: relative;
background-color: #fff;
width: 350px;
height: 200px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
border-radius: 15px;
transition: all 0.4s ease-in-out;
}
.card:hover{
height: 450px;
}
.pb{
position: absolute;
top: -45px;
left: 50%;
transform: translate(-50%, 0%);
background-image: url('./image/photo.jpeg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 150px;
width: 150px;
border-radius: 15px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
transition: all 0.4s ease-in-out;
}
.card:hover .pb{
height: 250px;
width: 250px;
}
.info{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
padding: 125px 0px 10px 0px;
transition: all 0.4s ease-in-out;
}
.card:hover .info{
display: flex;
padding: 230px 0px 10px 0px;
}
.detail{
position: relative;
display: flex;
opacity: 0;
z-index: -10;
justify-content: space-between;
padding: 10px 50px;
transform: translateX(-20px);
transition-timing-function: linear;
transition-duration: 0s, 0.2s, 0.2s;
transition-property: z-index, opacity, transform;
transition-delay: 0.2s, 0s, 0s;
}
.col{
display: flex;
flex-direction: column;
align-items: center;
}
.buttons{
position: relative;
display: flex;
opacity: 0;
z-index: -10;
padding: 10px 50px;
justify-content: space-between;
transform: translateX(-20px);
transition-timing-function: linear;
transition-duration: 0s, 0.2s, 0.2s;
transition-property: z-index, opacity, transform;
transition-delay: 0.2s, 0s, 0s;
}
button{
padding: 10px 30px;
border-radius: 5px;
cursor: pointer;
}
#follow{
background-color: #ff5f96;
border: 1px solid #ff5f96;
color: #fff;
font-weight: 500;
transition: all 0.3s linear;
}
#follow:hover{
background-color: #fa377b;
}
#message{
background-color: transparent;
border: 1px solid grey;
color: grey;
font-weight: 500;
transition: all 0.3s linear;
}
#message:hover{
background-color: darkgrey;
color: #fff;
}
.card:hover .detail,
.card:hover .buttons{
opacity: 1;
z-index: 0;
transform: translateX(0px);
transition-timing-function: linear;
transition-duration: 0s, 0.3s, 0.3s;
transition-property: z-index, opacity, transform;
transition-delay: 0s, 0.2s, 0.2s;
}now you’ve successfully created this Animated Profile Card using HTML and CSS. If your code does not work or faced any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.
