<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main>
<ul>
<li class="facebook">
<svg class="social-media-icon" viewBox="0 0 20 19.899">
<path d="M57.367,47.367a9.994,9.994,0,0,0-1.494,19.876V60.017H53.4V57.39h2.474V55.639c0-2.894,1.41-4.167,3.815-4.167a14.4,14.4,0,0,1,2.051.124v2.295H60.1c-1.022,0-1.377.97-1.377,2.061V57.39h2.995l-.407,2.627H58.721v7.249a10,10,0,0,0-1.354-19.9Z" transform="translate(-47.367 -47.367)" />
</svg>
<div class="profile-card">
<div class="cover">
<img src="https://scontent-hel3-1.xx.fbcdn.net/v/t1.0-9/43744352_1928798930536678_7085358293526249472_n.jpg?_nc_cat=104&_nc_sid=dd9801&_nc_ohc=0SbTrIE6zQsAX8aUEu8&_nc_ht=scontent-hel3-1.xx&oh=bd5d76630a2a4833154299c070ec9681&oe=5F97CEA9" alt="">
</div>
<div class="content">
<div class="photo-container">
<div class="photo">
<img src="https://scontent-hel3-1.xx.fbcdn.net/v/t1.0-1/p160x160/95479957_2954102254673002_414263227925397504_n.jpg?_nc_cat=106&_nc_sid=dbb9e7&_nc_ohc=kz4qSHQCVeEAX-Z-n1x&_nc_ht=scontent-hel3-1.xx&tp=6&oh=484e11cdc1a3cab3cb79450baf7b4a81&oe=5F96CAEB" alt="">
</div>
</div>
<div class="display-name">
<p>UM umEr</p>
<p>@umer</p>
</div>
<div class="link">
<a href="#" target="_blank">
<span>
<svg viewBox="0 0 20 19.23">
<path d="M40.014,31.578a.771.771,0,0,0-.769.769v3.5l-1.659,3.011a.764.764,0,0,0-.649-.361H32.322a.763.763,0,0,0-.562.243.779.779,0,0,0-.207.58l.769,10.769a.773.773,0,0,0,.769.715h3.846a.771.771,0,0,0,.769-.769h1.268a1.523,1.523,0,0,0,1.313.769h7.418a1.536,1.536,0,0,0,1.325-2.317A1.918,1.918,0,0,0,50.3,45.3a1.92,1.92,0,0,0,.484-3.341A1.921,1.921,0,0,0,49.629,38.5H42.712a14.087,14.087,0,0,0,.379-2.308c0-1.761-1.394-4.615-2.344-4.615Zm-6.866,8.461h3.02v9.23H33.806Z" transform="translate(-31.552 -31.578)" />
</svg>
Like
</span>
</a>
</div>
</div>
</div>
</li>
<li class="twitter">
<svg class="social-media-icon" viewBox="0 0 20 16.253">
<g transform="translate(-31.578 -70.066)">
<path d="M51.578,71.989a8.166,8.166,0,0,1-2.356.646,4.116,4.116,0,0,0,1.8-2.272,8.168,8.168,0,0,1-2.605,1,4.107,4.107,0,0,0-7.1,2.806,4.146,4.146,0,0,0,.108.935,11.646,11.646,0,0,1-8.458-4.288,4.114,4.114,0,0,0,1.271,5.478,4.1,4.1,0,0,1-1.86-.511v.051a4.1,4.1,0,0,0,3.293,4.023A4.161,4.161,0,0,1,34.592,80a4.076,4.076,0,0,1-.772-.075,4.108,4.108,0,0,0,3.834,2.852,8.24,8.24,0,0,1-5.1,1.755,8.109,8.109,0,0,1-.98-.057,11.666,11.666,0,0,0,17.963-9.832c0-.177,0-.355-.012-.529A8.352,8.352,0,0,0,51.578,71.989Z" transform="translate(0)" />
</g>
</svg>
<div class="profile-card">
<div class="cover">
<img src="https://pbs.twimg.com/profile_banners/728167602695114752/1564289897/1500x500">
</div>
<div class="content">
<div class="photo-container">
<div class="photo">
<img src="https://assets.codepen.io/5114963/internal/avatars/users/default.png?format=auto&height=80&version=1601455610&" alt="">
</div>
</div>
<div class="display-name">
<p>Umer </p>
<p>@UM umEr</p>
</div>
<div class="link">
<a class="twitter" href="" target="_blank">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g transform="translate(-8 -8)">
<path d="M18,8A10,10,0,1,0,28,18,10,10,0,0,0,18,8Zm3,11H19v2a1,1,0,0,1-2,0V19H15a1,1,0,0,1,0-2h2V15a1,1,0,0,1,2,0v2h2a1,1,0,0,1,0,2Z" />
</g>
</svg>
Follow
</span>
</a>
</div>
</div>
</div>
</li>
<li class="dev">
<svg class="social-media-icon" viewBox="0 0 512 512">
<g>
<g>
<path d="M149.339,207.013c-3.984-2.978-7.979-4.467-11.964-4.467h-17.907v107.268h17.918c3.984,0,7.979-1.489,11.963-4.465 c3.982-2.978,5.977-7.444,5.977-13.409v-71.518C155.313,214.467,153.313,209.989,149.339,207.013z M440.925,26.001H71.076 c-24.847,0-45.014,20.115-45.074,44.974v370.05c0.061,24.86,20.228,44.975,45.074,44.975h369.849 c24.856,0,45.013-20.114,45.073-44.975V70.975C485.938,46.116,465.771,26.001,440.925,26.001z M184.332,292.131 c0,19.314-11.922,48.579-49.655,48.518H87.032V170.757h48.648c36.39,0,48.63,29.222,48.64,48.546L184.332,292.131L184.332,292.131 z M287.707,201.099h-54.706v39.448h33.44v30.361h-33.44v39.438h54.718v30.363h-63.847c-11.458,0.296-20.987-8.759-21.274-20.218 V192.031c-0.278-11.448,8.789-20.956,20.237-21.242h64.884L287.707,201.099L287.707,201.099z M394.122,319.477 c-13.554,31.574-37.836,25.289-48.711,0l-39.561-148.679h33.442l30.506,116.767l30.363-116.767h33.45L394.122,319.477 L394.122,319.477z" />
</g>
</g>
<g />
</svg>
<div class="profile-card">
<div class="cover">
</div>
<div class="content">
<div class="photo-container">
<div class="photo">
<img src="https://assets.codepen.io/5114963/internal/avatars/users/default.png?format=auto&height=80&version=1601455610&" alt="">
</div>
</div>
<div class="display-name">
<p>UM umer</p>
<p>@umer</p>
</div>
<div class="link">
<a class="dev" href="" target="_blank">
<span>
<svg viewBox="0 0 20 20">
<path d="M15.333,12A3.351,3.351,0,0,0,12,15.333V28.667A3.351,3.351,0,0,0,15.333,32H28.667A3.351,3.351,0,0,0,32,28.667V15.333A3.351,3.351,0,0,0,28.667,12Zm0,2.222H28.667a1.092,1.092,0,0,1,1.111,1.111V28.667a1.092,1.092,0,0,1-1.111,1.111H15.333a1.092,1.092,0,0,1-1.111-1.111V15.333A1.092,1.092,0,0,1,15.333,14.222Zm6.649,2.2a1.116,1.116,0,0,0-1.094,1.128v3.333H17.556a1.111,1.111,0,1,0,0,2.222h3.333v3.333a1.111,1.111,0,1,0,2.222,0V23.111h3.333a1.111,1.111,0,1,0,0-2.222H23.111V17.556a1.112,1.112,0,0,0-1.128-1.128Z" transform="translate(-12 -12)" />
</svg>
Follow
</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</main>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
font-family: "Google Sans", "Open Sans", sans-serif;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body {
letter-spacing: -0.5px;
place-items: center;
display: grid;
height: 100vh;
width: 100%;
}
ul {
position: relative;
text-align: center;
list-style: none;
display: flex;
height: 400px;
}
ul li {
cursor: pointer;
margin: 20px;
height: 30px;
width: 30px;
}
ul li svg {
transition: 0.3s ease-in-out;
transform: translate(-50%);
fill: #b9b9b9;
height: 100%;
width: 100%;
}
ul li.facebook:hover .social-media-icon {
fill: #1877f2;
}
ul li.twitter:hover .social-media-icon {
fill: #1da1f2;
}
ul li.dev:hover .social-media-icon {
fill: #000;
}
ul li:hover .profile-card {
pointer-events: visible;
margin-top: 5px;
opacity: 1;
}
.profile-card {
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
border: solid 1px rgba(0, 0, 0, 0.1);
transition: 0.3s ease-in-out;
transform: translate(-50%);
background-color: white;
pointer-events: none;
border-radius: 10px;
margin-top: -20px;
overflow: hidden;
height: 300px;
width: 300px;
opacity: 0;
}
.profile-card .cover {
background-color: rgb(1, 25, 55);
overflow: hidden;
height: 100px;
width: 100%;
}
.profile-card .cover img {
object-position: center;
object-fit: cover;
height: 100%;
width: 100%;
}
.profile-card .content {
height: 200px;
width: 100%;
}
.photo-container {
height: 100px;
width: 100%;
z-index: 10;
}
.photo-container .photo {
margin: -50px auto;
border-radius: 50%;
overflow: hidden;
height: 100px;
width: 100px;
}
.photo-container .photo img {
object-fit: cover;
height: 100%;
width: 100%;
}
.display-name {
text-align: center;
font-weight: 500;
font-size: 20px;
color: #484848;
padding: 10px;
width: 100%;
}
.display-name p:last-child {
font-size: 16px;
color: #a7a7a7;
}
.link {
place-items: center;
display: grid;
height: 70px;
width: 100%;
}
.link a {
border: solid 2px rgba(0, 0, 0, 0.05);
background-color: #1877f2;
text-decoration: none;
place-items: center;
border-radius: 10px;
cursor: pointer;
display: grid;
height: 50px;
width: 150px;
color: white;
}
.link a.twitter {
background-color: #1da1f2;
}
.link a.dev {
background-color: rgb(1, 25, 55);
}
.link a svg {
pointer-events: none;
user-select: none;
margin-right: 5px;
height: 20px;
width: 20px;
fill: white;
}
.link a span {
pointer-events: none;
font-size: 18px;
display: flex;
}
