:root {
--background: #2C2C2C;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background);
display: grid;
height: 100vh;
margin: 0px;
font-size: 16px;
font-family: 'Red Hat Display', sans-serif;
}
.container {
margin: auto;
}
.profile-wrapper {
width: 350px;
height: 450px;
position: relative;
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
width: 350px;
height: 450px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: 0.5s;
}
.profile .profile-image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-color: var(--background);
transition: .5s;
}
.profile-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.profile:hover img {
opacity: 0.4;
transition: .5s;
}
.profile:hover .profile-image {
transform: translateY(-104px);
transition: all .9s;
}
.profile:hover .profile-bio {
opacity: 0.9;
}
.social-icons {
position: absolute;
display: flex;
gap: 12px;
z-index: 3;
bottom: 164px;
}
.social-icons li {
list-style: none;
}
.social-icons li a {
position: relative;
display: block;
display: grid;
place-items: center;
background: #fff;
font-size: 23px;
font-weight: bold;
width: 40px;
height: 40px;
border: 1px solid #CDCDCD;
border-radius: 8px;
transition: .2s;
transform: translateY(32px);
opacity: 0;
}
.social-icons li a:hover {
background: var(--background);
transition: .2s;
}
.social-icons li a svg {
color: var(--background);
transition: .2s;
}
.social-icons li a:hover svg {
color: white;
transition: 0.8s;
transform: rotateY(360deg);
}
.profile:hover .social-icons li a {
opacity: 1;
}
.profile:hover li:nth-child(1) a {
transition-delay: 0.1s;
}
.profile:hover li:nth-child(2) a {
transition-delay: 0.2s;
}
.profile:hover li:nth-child(3) a {
transition-delay: 0.3s;
}
.profile:hover li:nth-child(4) a {
transition-delay: 0.4s;
}
.profile-name {
position: absolute;
bottom: 0;
left: 0;
z-index: 4;
width: 100%;
height: 106px;
padding: 12px 14px;
z-index: 1;
color: #333;
background-color: #fff;
text-align: left;
}
.profile:hover .profile-name {
background-color: #fff;
}
.profile-name h2 {
margin-bottom: 8px;
}