div.team-liste-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
position: relative;
}
div.team-liste-container div.team-item {
position: relative;
height: calc(18vw * 2);
width: 33%;
margin: 10px 0;
padding: 10px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
div.team-liste-container div.team-item div.team-footer {
position: absolute;
bottom: 20px;
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
align-items: center;
}
div.team-item h3,
div.team-item p {
color: white; line-height: 1;
padding: 0;
margin: 0;
opacity: 0;
transform: translateY(5px);
transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1); -webkit-transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
-moz-transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
}
div.team-item p {
font-size: 1rem !important;
}
div.team-item:hover h3,
div.team-item:hover p,
div.team-item:hover div.team-row {
transform: translateY(0);
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
} div.right-side {
width: 40px;
cursor: pointer;
}
div.team-row {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
mix-blend-mode: difference;
opacity: 0;
transform: translateY(5px);
transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-webkit-transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
-moz-transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
div.team-item {
cursor: pointer;
}
div.row-ditection {
width: 10px;
height: 10px;
border-top: 1px solid white;
border-right: 1px solid white;
transform-origin: center;
transform: rotate(45deg);
transition: all 0.5s ease;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
div.team-row div.row-bar {
margin-right: 0;
margin-left: -20px;
border-top: 1px solid white;
width: 10px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
div.team-item:hover div.team-row div.row-bar {
width: 30px;
margin-left: 0;
margin-right: -5px;
}
div.team-item:hover div.row-ditection {
margin-right: 5px;
}