style2.css

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
html{
    font-size: 10px;
}
.heading{
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 2rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.main{
    position: absolute;
    width:100%;
    height: auto;
    display: flex;
    flex-wrap:wrap ;
    justify-content: center;
    align-items: center;
    margin-top: 100px;

}
.cointainer{
    box-sizing: content-box;
    display: flex;
    justify-content:space-around;
    align-items: center;
    height: 40rem;
    width:30rem ;
    padding: 1rem 5rem;
    margin: .5rem 4rem;
    /* border:2px solid black; */
}
.profile-card{
position: relative;
width:28rem;
height:28rem;
padding:4rem;
border-radius:20px;
box-shadow: 0 0 22px beige;
transition: 0.6s;
background-color:rgba(0, 0, 0, 0.837);
}
.profile-card .img{
    position: relative;
    width: 100%;
    height: 100%;
    transition: 0.6s;
 
}
 .img img{
    width:100%;
    height: 100%;
    transition: 0.6s;
    border-radius: 50%;
}
.social-links{
    font-size: 3rem;
}

.profile-card:hover{
    border-radius: 10px;
    height: 28rem;
}

.profile-card:hover img{
    border-radius: 10px;
}

.profile-card:hover .img{
    transform: translateY(-60px);
}
.caption{
    text-align: center;
    transform:  translateY(-60px);
    opacity : 0;
    font-size: 20px;
    color: white;
}
.profile-card:hover .caption{
    opacity: 1;
}
.social-links a{
    color: white;
}