M/s VIKASH TECH - We Write Imaginations to Codes..!!

Profile Card 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.
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 understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Profile Card Hover Animation | VikasTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <a href="#">
          <img src="profile.png" alt="">
        </a>
        <div class="title">
Praveen Kumar</div>
<div class="place">
patna, Bihar</div>
</div>
<div class="content">
        <p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
          <div class="btn">
            <button>Message</button>
          </div>
<div class="btn">
            <button>Following</button>
          </div>
</div>
</div>
<div class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
</div>
</div>
<script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  padding: 50px;
  text-align: center;
}
.container{
  height: 250px;
  width: 250px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
}
.container:hover{
  height: 470px;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.container .wrapper img{
  position: relative;
  z-index: 20;
  border-radius: 50%;
  display: block;
  height: 200px;
  width: 200px;
  border: 5px solid #fff;
  object-fit: cover;
  margin: 20px auto;
  transition: all 0.3s ease;
}
.container:hover .wrapper img.active{
  height: 470px;
  width: 350px;
  margin: 0px auto;
  border: none;
  border-radius: 5px;
}
.wrapper .title{
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  padding: 10px;
  line-height: 25px;
}
.wrapper .place{
  color: #fff;
  font-size: 17px;
  line-height: 0px;
  margin: 10px 0;
}
.content{
  color: #fff;
  font-size: 17px;
  margin-top: 10px;
  padding: 1px 20px 10px 20px!important;
}
.content .buttons{
  display: flex;
}
.buttons .btn{
  height: 40px;
  width: 150px;
  margin: 0 5px;
}
.buttons .btn button{
  height: 100%;
  width: 100%;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.3s;
}
.btn button:hover{
  transform: scale(0.95);
}
.container .icons{
  position: relative;
  margin-top: -435px;
  margin-left: 10px;
  list-style: none;
}
.container .icons.active{
  display: none;
}
.container .icons li{
  height: 40px;
  width: 40px;
  margin: 5px 0;
  opacity: 0;
  margin-left: -100px;
  transition: all 0.5s ease;
}
.container:hover .icons li{
  opacity: 1;
  margin-left: 7px;
}
.container:hover .icons li:nth-child(2){
  transition-delay: 0.2s;
}
.container:hover .icons li:nth-child(3){
  transition-delay: 0.4s;
}
.container .icons li a{
  color: #7b00e0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #fff;
  display: block;
  line-height: 40px;
  transition: all 0.3s;
}
.container .icons li a:hover{
  transform: scale(0.9);
}

JS

 const img = document.querySelector("img");
      const icons = document.querySelector(".icons");
      img.onclick = function(){
        this.classList.toggle("active");
        icons.classList.toggle("active");
      }
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: