47 lines
751 B
CSS
Executable file
47 lines
751 B
CSS
Executable file
/*****************************
|
|
* FACES
|
|
*****************************/
|
|
|
|
.faces {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 80vw;
|
|
height: 30vh;
|
|
}
|
|
|
|
.face {
|
|
width: 100%;
|
|
height: 33.33vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.face:hover {
|
|
filter: invert(50%);
|
|
}
|
|
|
|
.face img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
transition: all 2s ease-out forwards;
|
|
}
|
|
|
|
.face.active img {
|
|
animation: fadeIn 2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|