<div class="container">
<div class="card-wrapper">
<div class="card-container">
<div class="card-header">
<img src="https://images.unsplash.com/photo-1542345812-d98b5cd6cf98?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Face Image">
</div>
<div class="card-footer">
</div>
<div class="card-footer-title">
<span class="roboto-bold">
Saeed Hassanvand
</span>
</div>
</div>
<div class="card-hover-content-container">
<div class="card-menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="card-hover-content">
<a href="https://codepen.io/Hassanvand">
<img src="https://image.flaticon.com/icons/svg/145/145812.svg" alt="tiwtter">
</a>
<a href="https://codepen.io/Hassanvand">
<img src="https://image.flaticon.com/icons/svg/145/145808.svg" alt="pinterest">
</a>
<a href="https://codepen.io/Hassanvand">
<img src="https://image.flaticon.com/icons/svg/145/145802.svg" alt="facebook"/>
</a>
</div>
</div>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0
}
.card-wrapper {
background-color: #343741;
height: 500px;
width: 320px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 0 0;
transform: scale(0.95);
transition: transform 0.5s, background-color 0.5s, box-shadow 0.5s;
}
.card-wrapper:hover {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}
.card-container {
width: 100%;
height: 100%;
}
.card-header {
position: absolute;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0
}
.card-header img {
max-width: 100%;
height: 100%;
transition: all 0.5s;
}
.card-wrapper:hover .card-header img {
transform: scale(1.2) rotate(3deg);
}
.card-footer {
height: 15%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
transition: color 500ms;
color: white;
background-color: #1d1e24;
opacity: 0.7;
display: flex;
justify-content: center;
align-items: center;
}
.card-footer-title span {
font-family: Oswald;
font-size: 24px;
position: absolute;
left: 25%;
bottom: 25px;
color: white;
font-weight: bold;
text-shadow: 0 0 1px white;
}
.card-hover-content-container {
background-color: #1d1e24;
width: 140px;
height: 140px;
position: absolute;
top: -60px;
right: -60px;
border-radius: 0px 0px 100px 100px;
transition: all 0.2s, border-radius 1s, top 1s;
overflow: hidden;
color: white;
display: flex;
justify-content: center;
align-items: flex-end;
opacity: 0.7;
}
.card-hover-content-container:hover {
border-radius: 0;
top: 0;
right: 0;
width: 100%;
height: 85%;
opacity: 0.5;
}
.card-menu-icon {
position: absolute;
right: 80px;
top: 85px;
color: white;
opacity: 1;
font-size: 20px;
}
.bar {
width: 25px;
height:2px;
background-color: white;
margin: 3px
}
.card-hover-content-container:hover .card-menu-icon {
opacity: 0;
right: 15px;
top: 15px;
}
.card-hover-content-container:hover .card-hover-content {
opacity: 1;
transform: scale(1);
transform: translateY(0);
}
.card-hover-content {
width: 100%;
text-align: center;
padding: 5%;
opacity: 0;
transform: scale(0.5);
transform: translateY(-200%);
transition: opacity 0.2s, transform 0.8s;
}
.card-hover-content a {
border-radius: 100%;
border: 0;
width: 50px;
height: 50px;
display: inline-block;
background-color: #343741;
color: white;
margin: 5px;
transition: all 0.5s;
}
.card-hover-content a:hover {
transform: scale(1.2);
}
This Pen doesn't use any external JavaScript resources.