A logo grid makes a portfolio easy to browse. A short project brief gives someone a reason to click. This CSS pattern combines the two: the logo fades into a brief on hover or keyboard focus, while narrow screens show both. The fictional Studio North example uses the same design idea as the cards on our agency partnership page.
Change the CSS below. The preview updates as you type. Your edits stay in this browser tab.
Hover over the card or Tab to its link. On a narrow screen, the brief stays visible.
HTML for this example
<a class="project-card" href="#example-project" aria-label="Read the Studio North case study" aria-describedby="project-brief">
<span class="project-card__logo" aria-hidden="true">STUDIO<br>NORTH<span class="project-card__mark">↗</span></span>
<span class="project-card__brief" id="project-brief">
<strong>Studio North</strong>
<span>A fictional project for trying this pattern: a visual identity and a simple, useful website.</span>
<span class="project-card__link">Read case study →</span>
</span>
</a>
<p id="example-project" class="example-note">Demo link destination. In your project, use the real case-study URL.</p>
Put both layers in one grid cell
grid-area: 1 / 1 places the logo and brief in the same cell. Both layers still contribute to the card’s size, so a longer brief can make the card taller. Changing opacity reveals the text without removing it from the document. Try changing --surface and --active, then increase the padding.
Make the reveal work beyond a mouse
The card is one ordinary link. :focus-visible gives keyboard visitors the reveal and a clear outline. The media query keeps both layers visible when the primary input cannot hover, and at widths of 360px or less. Here, that width belongs to the preview frame. Adjust the breakpoint for your layout. Reduced-motion preferences remove the transitions.
One detail to get right
Keep the brief short and check contrast in both color states. When repeating cards, give each brief a unique ID and update its link’s aria-describedby. Avoid nesting a second link or button inside the card. The sample link stays within the demo; replace it with your real project URL.
Reference: MDN on keyboard focus styling.
Have a client website that needs this kind of attention? See our WordPress development for agencies and case studies.
Leave a Reply