61 lines
1.2 KiB
CSS
61 lines
1.2 KiB
CSS
.imageWrapper {
|
|
position: relative;
|
|
animation: slideIn 1s ease-out forwards;
|
|
transform: translateX(-120px) rotate(12deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
animation: slideIn 1s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.card:hover .creators {
|
|
transform: rotateY(360deg) rotate(12deg) scale(1.05);
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.creators {
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
|
|
transition: transform 1s ease, box-shadow 0.4s ease;
|
|
}
|
|
|
|
.imageWrapper:hover .creators {
|
|
transform: rotateY(180deg) rotate(24deg) scale(1.05);
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
|
|
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
to {
|
|
transform: translateX(0) rotate(12deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.titles {
|
|
margin-left: 40px;
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease forwards;
|
|
animation-delay: 0.5s;
|
|
color: #1E3A8A;
|
|
}
|
|
|
|
.card:hover .title {
|
|
transform: translateY(-5px);
|
|
color: #163172;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |