Blueprint Reveal
Engineering blueprint aesthetic: a dot grid and corner crosshair marks fade in on hover, with title and body shifting to cyan.
Blueprint Reveal the 22nd 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-22">
<div class="card-22__grid"></div>
<div class="card-22__marks">
<div class="card-22__mark card-22__mark--tl"></div>
<div class="card-22__mark card-22__mark--tr"></div>
<div class="card-22__mark card-22__mark--bl"></div>
<div class="card-22__mark card-22__mark--br"></div>
</div>
<div class="card-22__content">
<span class="card-22__label">// BLUEPRINT</span>
<h4 class="card-22__title">Blueprint</h4>
<p class="card-22__body">Grid lines and corner marks appear on hover.</p>
</div>
</div> /* Demo 22 has its own title/body color transitions, so it owns those rules. */
.card-22 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
background: #17171f;
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition:
background 0.4s,
border-color 0.4s,
box-shadow 0.4s;
}
.card-22:hover {
background: #041428;
border-color: rgba(61, 232, 245, 0.5);
box-shadow:
0 0 32px rgba(61, 232, 245, 0.1),
inset 0 0 32px rgba(61, 232, 245, 0.04);
}
.card-22__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61, 232, 245, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 232, 245, 0.08) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0;
transition: opacity 0.4s;
}
.card-22:hover .card-22__grid {
opacity: 1;
}
.card-22__marks {
position: absolute;
inset: 0;
z-index: 1;
}
.card-22__mark {
position: absolute;
width: 14px;
height: 14px;
opacity: 0;
transition: opacity 0.3s 0.15s;
}
.card-22__mark::before,
.card-22__mark::after {
content: "";
position: absolute;
background: rgba(61, 232, 245, 0.7);
}
.card-22__mark::before {
width: 1px;
height: 100%;
left: 50%;
}
.card-22__mark::after {
width: 100%;
height: 1px;
top: 50%;
}
.card-22__mark--tl { top: 10px; left: 10px; }
.card-22__mark--tr { top: 10px; right: 10px; }
.card-22__mark--bl { bottom: 10px; left: 10px; }
.card-22__mark--br { bottom: 10px; right: 10px; }
.card-22:hover .card-22__mark {
opacity: 1;
}
.card-22__content {
position: relative;
z-index: 2;
}
.card-22__label {
font-family: monospace;
font-size: 10px;
color: rgba(61, 232, 245, 0.5);
letter-spacing: 0.12em;
text-transform: uppercase;
display: block;
margin-bottom: 6px;
opacity: 0;
transition: opacity 0.3s 0.1s;
}
.card-22:hover .card-22__label {
opacity: 1;
}
.card-22__title {
font-size: 18px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
transition: color 0.35s;
}
.card-22__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
transition: color 0.35s;
}
.card-22:hover .card-22__title {
color: #3de8f5;
}
.card-22:hover .card-22__body {
color: rgba(61, 232, 245, 0.6);
}