Put each thumbnail image and its descriptive title inside an anchor with a real href, then use CSS Grid and a consistent image box to make the cards responsive. Give meaningful images useful alt text; use alt="" when the image adds nothing beyond the visible title.
Build a card with a real, descriptive link
An anchor’s href supplies the destination. Nest the image and the heading inside that anchor so both belong to the same link. Use a real page URL rather than # when the card should navigate.
As an Amazon Associate I earn from qualifying purchases.
<article class="card">
<a class="card__link" href="/guides/gardening">
<img
src="/images/gardening-thumb.jpg"
alt="A raised garden bed with leafy vegetables"
width="640"
height="360"
>
<h2>How to start a garden</h2>
</a>
<p>A beginner guide to planning and planting a garden.</p>
</article>The article groups one self-contained card; the anchor makes its image and title a single navigation target. The visible heading names the destination, which is clearer than generic link text such as “Read more.” See MDN’s anchor element reference.
Choose alt text that complements the link title
For a linked image, alternative text should help communicate the destination or the image’s relevant information. If the picture contributes useful context—such as showing the garden—describe it briefly. If it is decorative or merely repeats the visible heading, use alt="" to avoid making assistive technology announce the same idea twice.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<a href="/guides/composting">
<img src="/images/compost-thumb.jpg" alt="" width="640" height="360">
<h2>How to make compost</h2>
</a>If an image is the only content inside a link, its alt text needs to identify the link’s purpose or destination. Use an HTML img for meaningful content imagery; CSS backgrounds are suitable for decoration but do not provide an image text alternative. MDN explains image alternatives in its image element reference and HTML images tutorial.
Arrange cards in a responsive grid
CSS Grid can create as many columns as fit while keeping each card above a chosen minimum width. The following minimum is 230 pixels; adjust it and the gap to suit your layout.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1rem;
}
.card {
border: 1px solid #ccc;
border-radius: 0.5rem;
overflow: hidden;
}
.card__link {
display: block;
color: inherit;
text-decoration: none;
}
.card__link:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.card__link img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card__link h2,
.card p {
margin: 0;
padding: 0.75rem;
}
.card__link:hover h2 {
text-decoration: underline;
}This follows MDN’s card layout recipe. The visible focus outline helps keyboard users identify the active card; Enter activates a focused anchor.
Rank #2
Set image dimensions and decide how to crop
Include the source image’s actual width and height attributes when known. They let the browser reserve space while the image loads, helping prevent the surrounding layout from shifting. CSS can still scale the image to the card.
With a 16:9 box, object-fit: cover fills the space but can crop the source. If the subject is off-center, use object-position to adjust the crop, for example object-position: center top. Use object-fit: contain when showing the entire image matters more than filling the box; this can leave unused space around it.
Decide whether the whole card or only some parts link
For a card with one destination, one anchor around the linked image and title is a straightforward pattern. If the card has multiple distinct actions—such as an article link and a separate “Save” control—make each action its own link or control. Do not nest anchors, and ensure each link’s own content explains where it goes.
Common mistakes and fixes
- The image is not clickable: Check that the
imgis inside anaelement with a validhref. - The link has no useful name: Add a visible destination title inside the anchor, or provide suitable alt text if the image is its only content.
- The thumbnail looks awkwardly cropped: Keep
coverfor a filled box and adjustobject-position; choosecontainif the full image must remain visible. - The page jumps as images load: Add the image’s intrinsic
widthandheightattributes. - Remote thumbnails disappear or change: Prefer images you have permission to publish and host or control. Hotlinking gives you no control if another site removes or changes its image.
- Keyboard focus is hard to see: Add a visible
:focus-visiblestyle to the card link.
Or skip the browser setup
If you need thumbnail source images rather than hand-building browser capture code, ScreenshotNeo is a website screenshot API and MCP server. Its API can return a screenshot or PDF; the example below saves a screenshot as WebP. See the ScreenshotNeo documentation for request options.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minutecurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response indicates the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Can I make an image clickable in HTML?
Yes. Place the img inside an anchor with a real href; provide meaningful alt text if the image is the link’s only content.
Rank #4
Should every thumbnail use descriptive alt text?
No. Describe information the image adds; use alt="" when it is decorative or the adjacent linked title already conveys its purpose.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Does object-fit: cover show the entire thumbnail?
Not necessarily. It fills the box and may crop the image; use contain when the full image must stay visible.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
