Profile card with tooltip

Profile Card

Table of Contents

Introduction

Today we are going to make a Profile card with tooltip with a hovering effect by using only HTML and CSS. In this profile card, there will be an image of person, when the user hovers over it, details will appear. This is very useful, as you can use it in your profile to show your details with hovering effects.

Let’s start making this profile card by doing simple coding. You just need to follow us step by step to understand it properly. This is going to be easy as a beginner and an experienced guy can both understand their concept.

HTML

First, we will create the structure of the profile card with the help of HTML. In this, we will first make a parent div in which all the content of the card will be written. Then we have to make three subdivs for cards, in which there will be images. Names in the heading tag, logos, and also a button to send us direct message content in each subdiv in the parent div.

<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.0.1/remixicon.css">

      <link rel="stylesheet" href="styles.css">

      <title>Profile card with tooltip -- LayakCoder</title>
   </head>
   <body>
      <div class="container">
         <article class="card__article">
            <div class="card__profile">
               <img src="https://images.pexels.com/photos/1486064/pexels-photo-1486064.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load">
            </div>
            
            <div class="card__tooltip">
               <div class="card__content">
                  <header class="card__header">
                     <span>Social</span>
                     
                     <div class="card__social"> 
                        <a href="https://www.linkedin.com/" target="_blank">
                           <i class="ri-linkedin-box-line"></i>
                        </a>
   
                        <a href="https://github.com/" target="_blank">
                           <i class="ri-github-fill"></i>
                        </a>
   
                        <a href="https://dribbble.com/" target="_blank">
                           <i class="ri-dribbble-line"></i>
                        </a>
                     </div>
                  </header>
   
                  <div class="card__data">
                     <div class="card__image">
                        <div class="card__mask">
                           <img src="https://images.pexels.com/photos/1486064/pexels-photo-1486064.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="image" class="card__img">
                        </div>
                        
                     </div>
   
                     <h2 class="card__name">Aman Prajapati</h2>
                     <h3 class="card__profession">Web designer</h3>
   
                     <a href="#" class="card__button">
                        <i class="ri-chat-3-line"></i> <span>Send Message</span>
                     </a>
                  </div>
               </div>
            </div>
         </article>

         <article class="card__article">
            <div class="card__profile">
               <img src="https://images.pexels.com/photos/1043473/pexels-photo-1043473.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
            </div>
            
            <div class="card__tooltip">
               <div class="card__content">
                  <header class="card__header">
                     <span>Social</span>
                     
                     <div class="card__social"> 
                        <a href="https://www.linkedin.com/" target="_blank">
                           <i class="ri-linkedin-box-line"></i>
                        </a>
   
                        <a href="https://github.com/" target="_blank">
                           <i class="ri-github-fill"></i>
                        </a>
   
                        <a href="https://dribbble.com/" target="_blank">
                           <i class="ri-dribbble-line"></i>
                        </a>
                     </div>
                  </header>
   
                  <div class="card__data">
                     <div class="card__image">
                        <div class="card__mask">
                           <img src="https://images.pexels.com/photos/1043473/pexels-photo-1043473.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="image" class="card__img">
                        </div>
                        
                     </div>
   
                     <h2 class="card__name">Shivam Sharma</h2>
                     <h3 class="card__profession">Web designer</h3>
   
                     <a href="#" class="card__button">
                        <i class="ri-chat-3-line"></i> <span>Send Message</span>
                     </a>
                  </div>
               </div>
            </div>
         </article>

         <article class="card__article">
            <div class="card__profile">
               <img src="https://images.pexels.com/photos/977796/pexels-photo-977796.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
            </div>
            
            <div class="card__tooltip">
               <div class="card__content">
                  <header class="card__header">
                     <span>Social</span>
                     
                     <div class="card__social"> 
                        <a href="https://www.linkedin.com/" target="_blank">
                           <i class="ri-linkedin-box-line"></i>
                        </a>
   
                        <a href="https://github.com/" target="_blank">
                           <i class="ri-github-fill"></i>
                        </a>
   
                        <a href="https://dribbble.com/" target="_blank">
                           <i class="ri-dribbble-line"></i>
                        </a>
                     </div>
                  </header>
   
                  <div class="card__data">
                     <div class="card__image">
                        <div class="card__mask">
                           <img src="https://images.pexels.com/photos/977796/pexels-photo-977796.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                        </div>
                        
                     </div>
   
                     <h2 class="card__name">Gopal Garg</h2>
                     <h3 class="card__profession">Web Developer</h3>
   
                     <a href="#" class="card__button">
                        <i class="ri-chat-3-line"></i> <span>Send Message</span>
                     </a>
                  </div>
               </div>
            </div>
         </article>
      </div>
   </body>
</html>

CSS

After making the structure of this card, it’s time to give it some styling and responsiveness with the help of CSS. (an external stylesheet attached to the HTML file). In this we will first take it to the centre of the screen then style the card section.                                                             

In the card section, we will give a display flex to the parent div to take all the child divs in the column . Then we will make the card for the details of the person and make it hidden in the default case by giving a display none. Thenwhen the user hovers on the card, the details can be seen. Then we will give size and position to the Images.  At the end, it is very important to make it responsive, which will be done using @mediaquery in CSS.

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(230, 100%, 50%);
  --second-color: hsl(150, 100%, 38%);
  --title-color: hsl(230, 24%, 12%);
  --text-color: hsl(230, 4%, 60%);
  --gray-color: hsl(230, 24%, 88%);
  --border-color: hsl(230, 4%, 92%);
  --body-color: hsl(0, 0%, 3%);
  --container-color: hsl(0, 0%, 100%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Syne", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: 1rem;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: black;
  color: var(--text-color);
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*=============== CARD ===============*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100vh;
  place-items: center;
  margin-inline: 1.5rem;
  padding-block: 7rem;
}


.card__article {
  position: relative;
  padding-left: 50px;
  align-self: flex-end;
  display: flex;
  justify-content: center;
}

.card__profile, 
.card__mask {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.card__profile img, 
.card__mask img {
  width: 100px;
}

.card__profile {
  border: 4px solid var(--container-color);
  z-index: 5;
  transition: opacity .4s, transform .4s;
}

.card__tooltip {
  position: absolute;
  bottom: -2rem;
  padding-bottom: 5rem;
  transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
  pointer-events: none;
  opacity: 0;
}

.card__content {
  position: relative;
  width: calc(100vw - 3rem);
  background-color: var(--container-color);
  box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
  padding: 2rem 1.5rem;
  border-radius: 1.5rem;
}

.card__content::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--container-color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.75rem;
  margin-inline: auto;
  border-radius: .25rem;
  rotate: 45deg;
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.card__header span {
  color: var(--title-color);
  font-weight: 500;
}

.card__social {
  display: flex;
  column-gap: .75rem;
}

.card__social a {
  font-size: 1.25rem;
  color: var(--title-color);
}

.card__image {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto 1rem;
}



.card__data {
  text-align: center;
}

.card__name {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  font-weight: 600;
  margin-bottom: .25rem;
}

.card__profession {
  font-size: var(--normal-font-size);
  font-weight: 500;
  margin-bottom: 2rem;
}

.card__button {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--first-color);
  font-weight: 500;
}

.card__button i {
  font-size: 1.25rem;
}

/* Scale profile image */
.card__article:hover .card__profile {
  transform: scale(.8);
  opacity: .7;
}

/* Show tooltip card */
.card__article:hover .card__tooltip {
  opacity: 1;
  pointer-events: initial;
  bottom: 4rem;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 540px) {
  .card__content {
    width: 380px;
    padding-inline: 2rem;
  }
}

Finally, we made the Profile card with tooltip with the hovering effect with the help of HTML and CSS by following the simple code step by step. You should also do such a project to increase your practice and to clarify the concept of coding. To download the code, click on the button given below.

For more explanation, click on the link given below to watch the video.

2 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links