About us pop out effect HTML & CSS
HTML: code.
About us pop out effect css
Jack
Product Manager
Lia
Senior Developer
Luis
Senior UX
CSS: code.
body{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
margin: 0;
font-family: 'Merriweather', serif;
background: #f2f2f2;
}
.person{
display: flex;
align-items: center;
flex-direction: column;
width: 280px;
}
.container{
border-radius: 50%;
height: 312px;
transform: scale(0.48);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
width: 400px;
}
.container::after{
background-color: #f2f2f2;
content: "";
height: 10px;
position: absolute;
top: 390px;
width: 100%;
}
.container:hover{
transform: scale(0.54);
}
.container-inner{
clip-path: path("M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
);
position: relative;
transform-origin: 50%;
top: -200px;
}
.circle{
background: #fee7d5;
border-radius: 50%;
position: absolute;
height: 380px;
left: 10px;
top: 210px;
width: 380px;
}
.img{
position: relative;
transform: translateY(20px) scale(1.15);
transform-origin: 50% bottom;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.container:hover .img{
transform: translateY(0) scale(1.2);
}
.pManager{
left: 22px;
top: 164px;
width: 340px;
}
.sDeveloper{
left: -44px;
top: 174px;
width: 444px;
}
.sUX{
left: -16px;
top: 144px;
width: 460px;
}
.divider{
background: #ca6060;
height: 3px;
width: 160px;
}
.name{
color: #404245;
font-size: 36px;
font-weight: 600;
margin-top: 36px;
text-align: center;
}
.title{
color: #656667;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
margin-top: 5px;
}
