Frontend Engineer
Northwind, remote
$150k
Apply
Job Listing Card Hover
A job board row: an accent bar slides down the left edge, the company mark tips, and the salary steps aside for an Apply button. It also works from the keyboard through :focus-within.
Also known as: job card hover effect, job board card css, apply button reveal.
HTML
<article class="hfx-card-job-apply">
<span class="hfx-card-job-apply-logo">N</span>
<div class="hfx-card-job-apply-info">
<h3>Frontend Engineer</h3>
<p>Northwind, remote</p>
</div>
<div class="hfx-card-job-apply-side">
<span class="hfx-card-job-apply-pay">$150k</span>
<a class="hfx-card-job-apply-btn" href="#">Apply</a>
</div>
</article>CSS
.hfx-card-job-apply {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.75em;
overflow: hidden;
background: #fff;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
color: #1f2937;
font-family: system-ui, sans-serif;
position: relative;
display: flex;
align-items: center;
gap: 0.8em;
box-sizing: border-box;
width: 20em;
padding: 0.85em 1em;
transition: border-color 0.3s ease, box-shadow 0.35s ease;}
.hfx-card-job-apply:is(:hover, :focus-within) {
border-color: color-mix(in srgb, var(--c) 35%, transparent);
box-shadow: 0 0.8em 1.3em -0.9em color-mix(in srgb, var(--c) 60%, transparent);
}
.hfx-card-job-apply::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 0.2em;
background: var(--c);
transform: scaleY(0);
transform-origin: 50% 0;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within)::before { transform: scaleY(1); }
.hfx-card-job-apply-logo {
display: grid;
flex: none;
place-items: center;
width: 2.4em;
height: 2.4em;
border-radius: 0.6em;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
color: #fff;
font-weight: 800;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-logo { transform: rotate(-10deg) scale(1.06); }
.hfx-card-job-apply-info {
flex: 1;
min-width: 0;
}
.hfx-card-job-apply h3 {
margin: 0;
overflow: hidden;
font-size: 0.88em;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.hfx-card-job-apply p {
margin: 0.15em 0 0;
font-size: 0.74em;
color: #6b7280;
}
.hfx-card-job-apply-side {
display: grid;
place-items: center end;
}
.hfx-card-job-apply-side > * { grid-area: 1 / 1; }
.hfx-card-job-apply-pay {
font-size: 0.82em;
font-weight: 700;
color: #111827;
transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-job-apply-btn {
padding: 0.5em 0.95em;
border-radius: 0.5em;
background: var(--c);
color: #fff;
font-size: 0.75em;
font-weight: 700;
text-decoration: none;
opacity: 0;
transform: translateX(1.5em);
transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-pay {
opacity: 0;
transform: translateX(-1em);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-btn {
opacity: 1;
transform: none;
transition-delay: 0.05s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-job-apply, .hfx-card-job-apply *, .hfx-card-job-apply::before, .hfx-card-job-apply::after, .hfx-card-job-apply *::before, .hfx-card-job-apply *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<article class="group relative flex w-80 items-center gap-3 overflow-hidden rounded-xl border bg-white px-4 py-3 transition hover:border-blue-300 hover:shadow-lg">
<span class="absolute inset-y-0 left-0 w-1 origin-top scale-y-0 bg-blue-500 transition-transform duration-300 group-hover:scale-y-100"></span>
<span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 font-extrabold text-white transition duration-300 group-hover:-rotate-12">N</span>
<div class="min-w-0 flex-1">
<h3 class="truncate text-sm font-semibold">Frontend Engineer</h3>
<p class="text-xs text-gray-500">Northwind, remote</p>
</div>
<div class="grid place-items-center">
<span class="col-start-1 row-start-1 text-sm font-bold transition duration-300 group-hover:-translate-x-4 group-hover:opacity-0">$150k</span>
<a href="#" class="col-start-1 row-start-1 translate-x-6 rounded-lg bg-blue-500 px-4 py-2 text-xs font-bold text-white opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100">Apply</a>
</div>
</article>Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.