52 lines
999 B
SCSS
52 lines
999 B
SCSS
.card-container {
|
|
// Container styles if needed
|
|
}
|
|
|
|
.perspective {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.preserve-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.rotate-y-180 {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.backface-hidden {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden; /* Safari */
|
|
}
|
|
|
|
// Ensure the back is initially hidden and rotated
|
|
.card-back {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
// Flip on hover/focus-within the group
|
|
.group:hover .card-flip-inner,
|
|
.group:focus-within .card-flip-inner {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
// Style the front overlay and title
|
|
.card-front {
|
|
.absolute { // The overlay div
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
h3 {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
}
|
|
|
|
// Fade out overlay slightly on hover to reveal image more
|
|
.group:hover .card-front .absolute {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
// Optional: Hide front title on hover if desired
|
|
// .group:hover .card-front h3 {
|
|
// opacity: 0;
|
|
// }
|