Book Open
The card cover folds open like a book page using perspective rotateY, revealing hidden content on the reverse page.
Book Open the 26th of 27 designs in the 27 CSS Card Hover Effects collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="card-26">
<div class="card-26__page">
<p class="card-26__page-text">Hidden content revealed as you open the book.</p>
<span class="card-26__page-cta">Read now →</span>
</div>
<div class="card-26__cover">
<span class="card-26__tag">Preview</span>
<h4 class="card-26__title">Book Open</h4>
<p class="card-26__body">Cover folds open like a book page.</p>
</div>
</div> .card-26__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(124, 108, 255, 0.15);
color: #7c6cff;
border: 1px solid rgba(124, 108, 255, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-26__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-26__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-26 {
/* Both children (__page, __cover) are absolutely positioned so they
don't contribute to the parent's intrinsic width. Use a fixed
280px width here instead of 100%/max-width so the card has a
predictable size in any flex container (stage, playground iframe). */
width: 280px;
max-width: 100%;
height: 160px;
border-radius: 14px;
position: relative;
cursor: pointer;
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}
.card-26__page {
position: absolute;
inset: 0;
border-radius: 14px;
padding: 22px;
background: linear-gradient(135deg, #1a1228, #111118);
border: 1px solid rgba(124, 108, 255, 0.25);
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.card-26__page-text {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
}
.card-26__page-cta {
font-size: 12px;
color: #7c6cff;
font-weight: 600;
}
.card-26__cover {
position: absolute;
inset: 0;
border-radius: 14px;
padding: 22px;
background: #17171f;
border: 1px solid rgba(255, 255, 255, 0.1);
transform-origin: left center;
transform-style: preserve-3d;
transition:
transform 0.62s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.62s;
z-index: 2;
box-shadow: inset -6px 0 18px rgba(0, 0, 0, 0.3);
}
.card-26:hover .card-26__cover {
transform: perspective(900px) rotateY(-62deg);
box-shadow:
inset -6px 0 18px rgba(0, 0, 0, 0.55),
6px 0 22px rgba(0, 0, 0, 0.45);
}