.rkit-team-card {
background-color: white;
transition: all 0.3s;
overflow: hidden;
}
.rkit-team__detail {
padding: 1rem;
display: flex;
flex-direction: column;
}
.rkit-team__detail h4 {
margin-bottom: 0;
}
.rkit-team__img {
display: flex;
}
.rkit-team__img img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
.rkit-team__role {
color: gray;
font-size: 15px;
margin-bottom: 0.5rem;
}
.rkit-team__description {
margin-bottom: 0.5rem;
}
.rkit-team__overlay .rkit-team__detail {
visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.rkit-team__overlay:hover .rkit-team__detail {
visibility: visible;
animation: overlay_animation_in 0.3s ease-in;
}
.rkit-team__overlay:not(:hover) .rkit-team__detail {
animation: overlay_animation_out 0.3s ease-out;
}
.rkit-team__social {
display: flex;
justify-content: center;
align-items: center;
}
.rkit-team__social_item {
padding: 0.5rem;
aspect-ratio: 1/1;
width: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.rkit-team__social_on_hover_top .rkit-team__social {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
animation: social_on_hover_top 0.3s ease-in;
flex-direction: row;
width: 100%;
left: 0;
justify-content: center;
}
.rkit-team__social_on_hover_bottom .rkit-team__social {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
animation: social_on_hover_bottom 0.3s ease-in;
flex-direction: row;
width: 100%;
justify-content: center;
}
.rkit-team__social_on_hover_left .rkit-team__social {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
animation: social_on_hover_left 0.3s ease-in;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
}
.rkit-team__social_on_hover_right .rkit-team__social {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
right: 0;
animation: social_on_hover_right 0.3s ease-in;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
}
.rkit-team__social_on_hover_left:hover .rkit-team__social , 
.rkit-team__social_on_hover_right:hover .rkit-team__social , 
.rkit-team__social_on_hover_bottom:hover .rkit-team__social,
.rkit-team__social_on_hover_top:hover .rkit-team__social
{
display: flex;
justify-content: center;
align-items: center;
visibility: visible;
opacity: 1;
}
.rkit-team__centered .rkit-team-card{
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rkit-team__centered .rkit-team__img {
border-radius: 50%;
overflow: hidden;
width: 50%;
min-width: 180px;
}
.rkit-team__centered .rkit-team__img img {
aspect-ratio: 1/1;
}
.rkit-team__centered .rkit-team__detail {
text-align: center;
justify-content: center;
align-items: center;
}
@keyframes overlay_animation_in {
from {
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
}
to {
visibility: visible;
opacity: 1;
transform: scaleY(1);
transform-origin: bottom;
}
}
@keyframes overlay_animation_out {
from {
visibility: visible;
opacity: 1;
transform: scaleY(1);
transform-origin: bottom;
}
to {
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
}
}
@keyframes social_on_hover_left {
0% {
left: -5%;
opacity: 0;
}
100% {
left: 0%;
opacity: 1;
}
}
@keyframes social_on_hover_right {
0% {
right: -5%;
opacity: 0;
}
100% {
right: 0%;
opacity: 1;
}
}
@keyframes social_on_hover_top {
0% {
top: -5%;
opacity: 0;
}
100% {
top: 0%;
opacity: 1;
}
}
@keyframes social_on_hover_bottom {
0% {
bottom: -5%;
opacity: 0;
}
100% {
bottom: 0%;
opacity: 1;
}
}