👉MOBILE:-OPEN IN DESKTOP MODE
Profile Card with Tooltip
👉LIVE DEMO
.png) |
| Profile CARD |
HTML SOURCE CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--=============== REMIXICONS ===============-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.0.1/remixicon.css"
/>
<!--=============== CSS ===============-->
<link rel="stylesheet" href="style.css" />
<title>Profile card with tooltip</title>
</head>
<body>
<div class="container">
<article class="card__article">
<div class="card__profile">
<img
src="assets/Profile-Photo.jpeg"
alt="image"
class="card__profile-img"
/>
</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://https://www.instagram.com/" target="_blank">
<i class="ri-instagram-line"></i>
</a>
</div>
</header>
<div class="card__data">
<div class="card__image">
<div class="card__mask">
<img
src="assets/Profile-Photo.jpeg"
alt="image"
class="card__img"
/>
</div>
<span class="card__status"></span>
</div>
<h2 class="card__name">Tausif Ahmad</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>
</div>
</body>
</html>
CSS SOURCE CODE:-
/*=============== 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(230, 100%, 98%);
--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: var(--body-color); */
/* background-color: #001e4d; */
background-color: #cad6f9;
color: var(--text-color);
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/*=============== CARD ===============*/
.container {
height: 100vh;
display: grid;
place-items: center;
margin-inline: 1.5rem;
padding-block: 7rem;
}
.card__article {
position: relative;
align-self: flex-end;
display: flex;
justify-content: center;
}
.card__profile,
.card__mask {
width: 100px;
height: 100px;
background-color: var(--gray-color);
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
}
.card__profile img,
.card__mask img {
width: 95px;
}
.card__profile {
border: 4px solid var(--container-color);
z-index: 5;
transition: opacity 0.4s, transform 0.4s;
}
.card__tooltip {
position: absolute;
bottom: -2rem;
padding-bottom: 5rem;
transition: opacity 0.4s, bottom 0.4s cubic-bezier(0.6, -0.5, 0.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%, 0.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: -0.75rem;
margin-inline: auto;
border-radius: 0.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: 0.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__status {
width: 12px;
height: 12px;
background-color: var(--second-color);
position: absolute;
top: 0.5rem;
right: 0.75rem;
border-radius: 50%;
border: 2px solid var(--container-color);
}
.card__data {
text-align: center;
}
.card__name {
font-size: var(--h2-font-size);
color: var(--title-color);
font-weight: 600;
margin-bottom: 0.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: 0.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(0.8);
opacity: 0.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;
}
}