20 CSS Cards with Animations 09 / 20
Slide Reveal Card
On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.
The code
<div class="stage-9">
<div class="card-reveal">
<div class="reveal-img">🎨</div>
<div class="reveal-content">
<h4>Hover to Reveal</h4>
<p>Content slides up from the bottom replacing the image</p>
</div>
</div>
</div> <div class="stage-9">
<div class="card-reveal">
<div class="reveal-img">🎨</div>
<div class="reveal-content">
<h4>Hover to Reveal</h4>
<p>Content slides up from the bottom replacing the image</p>
</div>
</div>
</div>.card-reveal {
width: 195px;
height: 140px;
border-radius: 14px;
overflow: hidden;
position: relative;
cursor: pointer;
background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
border: 1px solid var(--ccg-border2);
}
.reveal-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-reveal:hover .reveal-img {
transform: translateY(-100%);
}
.reveal-content {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(180deg, #7c6cff, #ff6c8a);
transition: bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-reveal:hover .reveal-content {
bottom: 0;
}
.reveal-content h4 {
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.reveal-content p {
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-9 {
background: #0d0d14;
}
/* gallery vars + keyframes (so the demo renders standalone) */
:root {
--ccg-bg: #0a0a0f;
--ccg-surface: #111118;
--ccg-surface2: #17171f;
--ccg-surface3: #1e1e28;
--ccg-border: rgba(255, 255, 255, 0.15);
--ccg-border2: rgba(255, 255, 255, 0.13);
--ccg-accent: #7c6cff;
--ccg-pink: #ff6c8a;
--ccg-green: #1ed98a;
--ccg-amber: #f5a84a;
--ccg-cyan: #3de8f5;
--ccg-text: #f0eeff;
--ccg-muted: #6b6987;
--ccg-label: #9896b8;
--ccg-mono: "DM Mono", "Fira Code", monospace;
--ccg-sans: "Syne", sans-serif;
} .card-reveal {
width: 195px;
height: 140px;
border-radius: 14px;
overflow: hidden;
position: relative;
cursor: pointer;
background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
border: 1px solid var(--ccg-border2);
}
.reveal-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-reveal:hover .reveal-img {
transform: translateY(-100%);
}
.reveal-content {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(180deg, #7c6cff, #ff6c8a);
transition: bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-reveal:hover .reveal-content {
bottom: 0;
}
.reveal-content h4 {
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.reveal-content p {
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-9 {
background: #0d0d14;
}
/* gallery vars + keyframes (so the demo renders standalone) */
:root {
--ccg-bg: #0a0a0f;
--ccg-surface: #111118;
--ccg-surface2: #17171f;
--ccg-surface3: #1e1e28;
--ccg-border: rgba(255, 255, 255, 0.15);
--ccg-border2: rgba(255, 255, 255, 0.13);
--ccg-accent: #7c6cff;
--ccg-pink: #ff6c8a;
--ccg-green: #1ed98a;
--ccg-amber: #f5a84a;
--ccg-cyan: #3de8f5;
--ccg-text: #f0eeff;
--ccg-muted: #6b6987;
--ccg-label: #9896b8;
--ccg-mono: "DM Mono", "Fira Code", monospace;
--ccg-sans: "Syne", sans-serif;
}