* {
box-sizing: border-box;
}
body {
display
: grid;
place-items:
center
;
}
.container {
display
: grid;
grid-gap:
1
rem;
padding
:
1
rem;
grid-template-columns:
repeat
(
4
,
1
fr);
}
.card {
position
:
relative
;
display
: flex;
align-items: flex-end;
overflow
:
hidden
;
text-align
:
center
;
color
:
white
;
border-radius:
10px
;
box-shadow:
0
1px
1px
rgba(
0
,
0
,
0
,
0.1
),
0
2px
2px
rgba(
0
,
0
,
0
,
0.1
),
0
4px
4px
rgba(
0
,
0
,
0
,
0.1
),
0
8px
8px
rgba(
0
,
0
,
0
,
0.1
),
0
16px
16px
rgba(
0
,
0
,
0
,
0.1
);
height
:
350px
;
}
.card:before {
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
110%
;
background-
size
: cover;
background-position
:
0
0
;
transition: transform
calc(var(
850
ms) *
1.5
)
var(cubic-bezier(
0.19
,
1
,
0.22
,
1
));
}
.card:after {
content
:
""
;
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
200%
;
background-image
: linear-gradient(
to
bottom
, rgba(
0
,
0
,
0
,
0
)
0%
,
rgba(
0
,
0
,
0
,
0.009
)
11.7%
,
rgba(
0
,
0
,
0
,
0.034
)
22.1%
,
rgba(
0
,
0
,
0
,
0.072
)
31.2%
,
rgba(
0
,
0
,
0
,
0.123
)
39.4%
,
rgba(
0
,
0
,
0
,
0.182
)
46.6%
,
rgba(
0
,
0
,
0
,
0.249
)
53.1%
,
rgba(
0
,
0
,
0
,
0.32
)
58.9%
,
rgba(
0
,
0
,
0
,
0.394
)
64.3%
,
rgba(
0
,
0
,
0
,
0.468
)
69.3%
,
rgba(
0
,
0
,
0
,
0.54
)
74.1%
,
rgba(
0
,
0
,
0
,
0.607
)
78.8%
,
rgba(
0
,
0
,
0
,
0.668
)
83.6%
,
rgba(
0
,
0
,
0
,
0.721
)
88.7%
,
rgba(
0
,
0
,
0
,
0.762
)
94.1%
,
rgba(
0
,
0
,
0
,
0.79
)
100%
);
transform: translateY(
-50%
);
transition: transform calc(var(
850
ms) *
2
)
var(cubic-bezier(
0.19
,
1
,
0.22
,
1
));
}
.card:nth-child(
1
):before {
background-image
: linear-gradient(
to
bottom
right
,
#0F2027
,
#2C5364
);
}
.card:nth-child(
2
):before {
background-image
: linear-gradient(
to
bottom
right
,
#333333
,
#dd1818
);
}
.card:nth-child(
3
):before {
background-image
: linear-gradient(
to
bottom
right
,
#0f0c29
,
#24243e
);
}
.card:nth-child(
4
):before {
background-image
: linear-gradient(
to
bottom
right
,
#000046
,
#1CB5E0
);
}
.content {
position
:
relative
;
display
: flex;
flex-
direction
: column;
align-items:
center
;
width
:
100%
;
padding
:
1
rem;
transition: transform var(
850
ms)
var(cubic-bezier(
0.19
,
1
,
0.22
,
1
));
z-index
:
1
;
}
.title {
font-size
:
1.3
rem;
font-weight
:
bold
;
line-height
:
1.2
;
}
.data {
margin-top
:
1
rem;
font-size
:
1.125
rem;
font-style
:
italic
;
line-height
:
1.35
;
}
.card:after {
transform: translateY(
0
);
}
.content {
transform: translateY(calc(
100%
-
4.5
rem));
}
.content>*:not(.title) {
opacity:
0
;
transform: translateY(
1
rem);
transition: transform var(
850
ms)
var(cubic-bezier(
0.19
,
1
,
0.22
,
1
)),
opacity var(
850
ms)
var(cubic-bezier(
0.19
,
1
,
0.22
,
1
));
}
.card:hover,
.card:focus-within {
align-items:
center
;
}
.card:hover:before,
.card:focus-within:before {
transform: translateY(
-4%
);
}
.card:hover:after,
.card:focus-within:after {
transform: translateY(
-50%
);
}
.card:hover .content,
.card:focus-within .content {
transform: translateY(
0
);
}
.card:hover .content>*:not(.title),
.card:focus-within .content>*:not(.title) {
opacity:
1
;
transform: translateY(
0
);
transition-delay: calc(var(
850
ms) /
8
);
}