Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
These five CSS hover effects—lifted cards, quiet color shifts, growing underlines, image zooms and soft reveals—add clear feedback without requiring JavaScript. Each pattern includes copyable CSS, guidance on where it fits, and a keyboard-accessible equivalent. The key is to make the effect reinforce an interaction, not carry information that visitors can only discover with a mouse.
How to use these hover effects
CSS transitions interpolate between an element’s initial and target states. That change can help show what a control does and make the cause-and-effect relationship easier to perceive. A transition needs a property to animate, a duration, and an easing function; the examples below set those in the transition declaration.
Place the shared base styles in your stylesheet, then adapt the colors and dimensions to your design system. The timings here are examples, not performance benchmarks or universal usability rules. Test each effect in context, including on touch devices where there may be no hover state.
Free tools Windows power users keep installed
One-click scans. No signup required.
1. Lift a clickable card
A slight upward shift and stronger shadow suggest that a card is elevated or interactive. Use this for linked article previews, product tiles or other cards that lead to a destination. The transform does not change the card’s layout dimensions, so neighboring content does not get pushed aside.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card {
transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover,
.card:focus-within {
transform: translateY(-0.35rem);
box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.15);
}:focus-within applies the elevated state when a keyboard user focuses a link or control inside the card. Make sure that link still has an obvious focus indicator; the shadow alone may not be easy to distinguish, especially against a busy background. Keep the card’s clickable area and content position stable rather than moving neighboring elements to create the lift.
2. Shift a button’s colors quietly
A color transition offers feedback without movement, making it a useful fit for buttons, navigation links and filters. Here the button changes text, background and border colors when hovered or focused.
.button {
color: #17324d;
background: #fff;
border: 2px solid #2b6cb0;
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover,
.button:focus-visible {
color: #fff;
background: #2b6cb0;
border-color: #1f4f82;
}Check text contrast in both states, including the border if it is needed to identify the control. As a guardrail, the cited WCAG contrast ratios are 4.5:1 for normal text and 3:1 for larger text. A transition cannot compensate for a color combination that is hard to read.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →3. Grow an underline beneath a link
This effect adds an animated underline without changing the text’s position. It works well for navigation and other text links, especially when a conventional underline would feel visually heavy.
.nav-link {
position: relative;
text-decoration: none;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -0.2rem;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
transform: scaleX(1);
}If the underline is the only sign that a link is interactive or focused, provide another persistent cue or a clear focus indicator. Some visitors do not hover, and keyboard users need to see where focus is. Do not remove the browser’s focus outline unless you replace it with a comparably visible indicator.
4. Zoom an image inside its frame
A restrained scale-up draws attention to a portfolio thumbnail or product preview. Put the image in a frame with overflow: hidden: the frame clips the enlarged image so the zoom does not cause the page to reflow.
.thumb {
overflow: hidden;
}
.thumb img {
display: block;
transition: transform 240ms ease;
}
.thumb:hover img,
.thumb:focus-within img {
transform: scale(1.04);
}This is one of the more motion-heavy examples. Keep the scale modest, and avoid adding large zooms or panning that may be uncomfortable for people sensitive to motion. If the image is a link, check that keyboard focus is visibly indicated on the link as well as any visual change to the image.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 115. Reveal supporting content with a soft fade
Changing opacity can make secondary metadata or an already-present overlay more noticeable without shifting the layout. This example keeps the content visible at rest and brings it to full opacity on hover or when a contained control receives focus.
.reveal {
opacity: 0.72;
transition: opacity 180ms ease;
}
.reveal:hover,
.reveal:focus-within {
opacity: 1;
}Do not make essential text discoverable only by hovering. Preserve enough contrast in the resting state for the text to remain readable; opacity affects the rendered color and can reduce contrast. If an overlay contains a link, make sure keyboard focus exposes the relevant state and the link can be reached in the normal tab order.
Compare the five patterns before choosing one
| Pattern | Visual signal | Good fit | Layout risk | Keyboard equivalent | Reduced-motion approach |
|---|---|---|---|---|---|
| Lifted card | Translation and shadow | Clickable cards and previews | Transform does not reflow layout, but may visually overlap nearby content | :focus-within |
Remove the lift or use a non-moving cue such as a color change |
| Quiet color shift | Text, background and border color | Buttons, navigation and filters | Low; colors change without moving content | :focus-visible |
Keep the color feedback and remove or shorten the transition |
| Growing underline | Underline expands from left to right | Text links and navigation | Low; pseudo-element does not change text position | :focus-visible |
Show the underline immediately or use a non-moving focus cue |
| Image zoom | Image scales inside a clipped frame | Portfolio and product thumbnails | Clipped at the frame, but more visually prominent motion | :focus-within |
Disable or soften the scale |
| Soft reveal | Opacity increases | Supporting metadata or existing overlays | Low; layout is preserved, but faded text may lose contrast | :focus-within |
Set full opacity without animating, while retaining readable text |
Make hover effects work for keyboard and reduced-motion users
Hover is a pointer state, not a substitute for focus. Pair the visual change with :focus, :focus-visible or :focus-within, depending on the component. Then tab through the page and confirm that interactive elements appear in a sensible order, the focused item is easy to find, and the effect does not conceal content.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Keep focus indicators and the pointer cursor on interactive controls. Avoid removing outline without providing another clear focus treatment. If a link or button is meant to be interactive, its affordance should not depend on a hover animation alone.
The prefers-reduced-motion media feature lets CSS respond to a user preference for minimizing non-essential motion. A reduce value is a preference, not a browser error. You can remove movement while keeping a color or opacity cue, or reduce transition duration. For example, this broad rule nearly eliminates transitions and disables smooth scrolling when reduced motion is requested:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
transition-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}This blanket override is simple, but it suppresses transitions across the page. For a more tailored result, apply reduced-motion rules only to the moving components and retain non-motion feedback. The preference accepts reduce and no-preference; it has been available across browsers since January 2020.
Performance and implementation checks
For animated states, prefer transform and opacity where they produce the design you need. Color, shadow and filter changes can also be useful transition targets, but test them on the page rather than assuming every animation has the same rendering cost. Keep transitions limited to the properties that actually change; an indiscriminate transition: all can animate unintended changes and make behavior harder to predict.
- Confirm the resting state is understandable without interaction.
- Check hover with a mouse and focus with a keyboard; they should communicate equivalent interactive feedback.
- Test text and relevant control boundaries for contrast in every state.
- Check cards and image frames at narrow viewport widths for clipping or overlap.
- Enable the operating system’s reduced-motion preference and verify that non-essential movement is removed or replaced.
No 2026 adoption, conversion-lift or performance statistic is claimed here. The examples are visual patterns, not evidence that adding an effect will improve a site’s metrics.
Common problems and fixes
The effect works with a mouse but not with the keyboard
:hover does not cover keyboard focus. Add the appropriate focus selector: :focus-visible for a link or button, or :focus-within when a child inside a card or frame receives focus. Tab through the page to verify that the state appears on the intended component.
The underline or focus style is hard to see
A pseudo-element can sit too close to text or blend into the background. Check its color, thickness and placement against the actual component, and preserve a visible keyboard focus indicator. If the animated underline is the only link cue, add a persistent text treatment or another focus cue.
The zoomed image overlaps nearby content
Put the image in a frame with overflow: hidden and apply the transform to the image, not the surrounding layout. If the zoom still looks cramped, reduce the scale or leave more space around the frame.
Faded text is difficult to read
Raise the resting opacity or avoid fading that text. Evaluate the actual foreground and background colors together in both states; an opacity value alone does not establish that the resulting text has sufficient contrast.
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 minuteReduced-motion styles remove too much feedback
Instead of disabling every state change, target the movement-heavy component and substitute a color or opacity change. Reduced motion means minimizing non-essential movement; it does not require making interactive controls visually silent.
Best Value
Or skip the browser setup
If you need to capture a page while checking how it renders, ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return an image or PDF, without requiring you to set up browser automation for the capture.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It accepts cookie or consent banners before capture and removes 60+ known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Can CSS hover effects work on touchscreens?
A touchscreen may not have a persistent hover state. Make sure the component remains understandable and usable without hover, and do not hide required content behind it.
Should every interactive element have a hover animation?
No. Use an effect only when it clarifies a component’s interactive state; a visible focus treatment and understandable default design matter more than animation.
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.
