What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The simplest way to add an image hover effect is to define the image’s normal appearance, add a transition to that base rule, and change a visual property in a :hover rule. A wrapper with overflow:hidden keeps a zoom inside its frame. Use hover as visual enhancement—not as the only way to read content or operate a control—because touchscreens may not support hover consistently.
Minimal image hover effect
This example gently enlarges a linked image when a pointer enters it, then reverses the animation when the pointer leaves.
<a class="image-link" href="/destination">
<img src="photo.jpg" alt="Description of the photo">
</a>.image-link {
display: inline-block;
overflow: hidden;
}
.image-link img {
display: block;
transition: transform 200ms ease;
}
.image-link:hover img {
transform: scale(1.04);
}
@media (hover: none) {
.image-link:hover img {
transform: none;
}
}The transition belongs on the unhovered rule. CSS can then interpolate between the initial and hovered values as the pointer enters and leaves. MDN describes transition as shorthand for the property, duration, timing function, delay and behavior that control that interpolation (Using CSS transitions; transition property).
The wrapper supplies a clipping frame. Without overflow:hidden, a scaled image can extend beyond its intended bounds. The 200-millisecond duration and 1.04 scale are restrained design choices, not universal requirements; adjust them to your layout and audience.
PC 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 & 11Crashes, 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 minute#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Build the effect step by step
1. Mark up the image
Use meaningful alternative text. If the image is a link, put the image inside an anchor and make the destination clear. If it is purely decorative, an empty alt attribute can be appropriate; do not make a hover animation imply that a noninteractive image is clickable.
2. Create the clipping area
Set the wrapper to display:inline-block (or use a block-level card) and add overflow:hidden. Give the wrapper an explicit width, aspect ratio or layout rule if the surrounding design requires a consistent frame.
3. Animate a named property
Place a targeted transition such as transition: transform 200ms ease on the base image rule. Naming the property is preferable to transition: all, which can animate unrelated changes and make maintenance harder.
4. Define the hovered state
Apply the changed value with :hover. The pseudo-class can target the image itself or its wrapper. Targeting the wrapper, as in .image-link:hover img, keeps the effect active across the whole link hit area.
5. Check the surrounding layout
Test the effect in the actual card, grid or navigation component. A scale transform does not change document flow, so neighboring elements do not move, but a large scale can overlap them visually or be clipped by an ancestor.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Common visual variations
Fade an image
.image-link img {
opacity: 1;
transition: opacity 200ms ease;
}
.image-link:hover img {
opacity: 0.8;
}A fade is useful when the hover state should be subtle or when the image sits beside text. Make sure the reduced opacity still leaves important content legible.
Change grayscale to color
.image-link img {
filter: grayscale(1);
transition: filter 200ms ease;
}
.image-link:hover img {
filter: grayscale(0);
}Filters can communicate that an item is available to explore, but they may reduce contrast or make color-dependent information harder to perceive.
Combine effects carefully
.image-link img {
display: block;
filter: grayscale(0.35);
transition: transform 200ms ease, filter 200ms ease;
}
.image-link:hover img {
transform: scale(1.03);
filter: grayscale(0);
}List each property you intend to animate. Keep the change easy to reverse and avoid dramatic motion that distracts from the page’s primary task.
Free tools Windows power users keep installed
One-click scans. No signup required.
Reveal an overlay
.image-card {
position: relative;
overflow: hidden;
}
.image-card img {
display: block;
width: 100%;
}
.image-card__overlay {
position: absolute;
inset: auto 0 0;
padding: 1rem;
color: white;
background: rgb(0 0 0 / 0.72);
opacity: 0;
transform: translateY(100%);
transition: opacity 200ms ease, transform 200ms ease;
}
.image-card:hover .image-card__overlay,
.image-card:focus-within .image-card__overlay {
opacity: 1;
transform: translateY(0);
}This pattern includes :focus-within so keyboard users can reach the same revealed information when the card contains a focusable link or button. Keep the text available by another route if it conveys essential instructions.
Keyboard, touch and motion considerations
Provide a focus state
Hover is not a keyboard interaction. For a linked image, add a visible focus indication and, where hover reveals meaningful information, an equivalent focus treatment:
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
.image-link:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.image-link:focus-visible img {
transform: scale(1.04);
}Do not remove the browser’s focus indication unless you replace it with one that is at least as clear.
Handle touch input
MDN notes that :hover can be unavailable, briefly matched or remain active after a touch, depending on the browser (MDN: :hover). The @media (hover: none) guard in the first example prevents the zoom on primary inputs that cannot conveniently hover. It does not create a touch alternative, so keep labels, controls and instructions usable without hover.
For pointer-specific decoration, you can instead scope the style positively:
@media (hover: hover) {
.image-link:hover img {
transform: scale(1.04);
}
}MDN defines hover: hover as a test for whether the primary input can conveniently hover and hover: none for inputs that cannot (hover media feature). Use the query as a guard, not as a replacement for a usable non-hover design.
Respect reduced-motion preferences
A transition is optional. If your site already supports reduced motion, disable or shorten decorative movement for users who request it:
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
@media (prefers-reduced-motion: reduce) {
.image-link img,
.image-card__overlay {
transition: none;
}
}Choosing the right effect
| Effect | Best use | Watch for |
|---|---|---|
| Scale | Emphasize a clickable thumbnail or card | Clipping, overlap and excessive motion |
| Opacity | Subtle state change or de-emphasis | Low contrast and text becoming hard to read |
| Filter or grayscale | Show that an item becomes active or selected | Color-only meaning and reduced visual clarity |
| Overlay reveal | Expose a short caption or action | Information hidden from touch and keyboard users |
Choose the interaction target deliberately: the image, its wrapper or an entire linked card. The larger target is easier to use, but it should not make unrelated whitespace appear interactive.
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 minuteDebugging an image hover effect
The animation does not run
- Confirm that the selector matches the actual DOM and that the stylesheet loads without a syntax error.
- Check whether another rule overrides
transform,opacityorfilter. Inspect the element’s computed styles in browser developer tools. - Ensure the transition is on the base rule, not only inside
:hover. - Check whether a parent has
pointer-events:noneor an overlay is intercepting the pointer.
The image grows outside its frame
- Put
overflow:hiddenon the intended wrapper. - Look for an ancestor that clips, masks or establishes a different stacking context.
- Reduce the scale or use a fixed aspect-ratio frame if cards must remain uniform.
The effect works with a mouse but not on a phone
That is expected: touch input may not have a convenient hover state. Keep the content visible by default, use an explicit tap control for actions, or remove the decorative hover rule with @media (hover: none).
The overlay is visible but cannot be reached
Add a focusable element inside the card and style :focus-within. Verify tab order, contrast and that the overlay does not cover a control without receiving pointer events.
The image appears blurry
A transform can reveal interpolation or a low-resolution source. Use an appropriately sized source image, avoid unnecessary large scaling and test at the device pixel densities your audience uses.
Testing checklist
- Enter and leave the image with a mouse or trackpad; the transition should run in both directions.
- Tab to linked images and confirm a visible focus state.
- Use a touch device or emulate touch input and confirm that essential content remains available.
- Test narrow and wide layouts for clipping, overlap and cumulative card-height changes.
- Check contrast after opacity, filter or overlay changes.
- Enable reduced motion and verify that decorative movement is removed or minimized.
- Inspect slow-loading images and confirm that the layout remains understandable before they finish loading.
Or skip the browser setup
If you need screenshots of pages that contain your hover design, ScreenshotNeo provides a website screenshot API and MCP server. A request can return PNG, JPEG, WebP or PDF; its capture options include custom JavaScript, clicking an element, waiting for a selector or network idle, full-page capture and device or viewport settings. You can use those controls to put a page into a known state before capturing it.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
For a one-call WebP capture, replace the URL with your page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o hover-page.webpSee the ScreenshotNeo documentation for parameters and response headers. The equivalent Python request is:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("hover-page.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const fs = await import('node:fs/promises');
await fs.writeFile('hover-page.webp', Buffer.from(await res.arrayBuffer()));- Cookie banners, newsletter popups and chat widgets are removed before the shot; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed; response headers identify the page verdict and billing status.
- An MCP server lets Claude, Cursor and other MCP clients call
take_screenshot,get_page_infoandcapture_pdf. - The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan.
Create a free ScreenshotNeo account to start with the 1,000-shot monthly allowance.
Frequently Asked Questions
Can I add a hover effect without JavaScript?
Yes. CSS :hover, a base transition, and a changed property such as transform, opacity or filter are sufficient for the effects shown here.
Should the hover effect go on the image or the link?
Put the transition on the image and target it through the link or card when the whole area should respond. This keeps the hit area consistent with the interactive element.
Why does hover behave differently on phones?
Touchscreens may not provide a convenient hover state, and browsers can handle a touch-generated hover differently. Keep essential content and actions available without hover.
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.
