Guides · · Maxwell Prehoda
13 Image Hover Effect Examples, From Shop Grids to Codrops Classics
The image hover effects that earn their place do a job: show the back of the product, preview the video, zoom into the stitching, reveal the caption. Decoration comes second. Below are 13 image hover effects that real products and well-known front-end authors ship, from the two-line swap in Shopify's Dawn theme to WebGL displacement and cursor image trails.
Eleven are other people's work, credited and linked to the source we checked; two are ours. Each entry says what it is best for, what it runs on and what to watch out for, and most have a live demo from our directory, which is our own pure-CSS take on the pattern, not the original code.
1. Second image on hover in Shopify's Dawn theme: Best for ecommerce grids that show the product's other side
Platform: Shopify theme setting, CSS opacity swap
Dawn, Shopify's open-source reference theme, has a product card checkbox labelled Show second image on hover. Tick it and, on screens at least 990px wide, hovering a card fades the first product image to transparent and fades the second one in with a slight scale to 1.03. Cards with only one image just get that small zoom. You can read all of it in the theme's component-card.css.
It works because it answers a shopper's real question, what does the back look like, without a click. The motion is tiny: an opacity change and a three percent scale, on transform and opacity only, so it stays smooth even in a long collection grid.
Our Image Swap Hover below is a pure-CSS version of the same idea, with a pager dot that slides over to show there is a second shot.
Watch out for: Merchants in the Shopify Community report that the swap shows the product's second image, not the selected variant's, and that it does nothing on phones. Order your product media with that in mind.
2. Drift by imgix: Best for product detail pages that need a zoom on the fabric
Platform: Vanilla JS, no dependencies, BSD-2-Clause
Drift is imgix's open-source zoom on hover library: point at a product photo and a pane shows that part of the image magnified, following the cursor. It has no dependencies, and the pane can sit beside the image or inline over it. By default it switches to the inline pane at window widths of 375px and below.
The options show it was built by people who had to ship it. hoverDelay waits before opening so the pane does not flash as the cursor crosses the page, and touchDelay lets people start a scroll on the image without opening the zoom by accident.
If you only need the zoom and not a separate high-resolution pane, our Zoom to Cursor below does it with no JavaScript: a 3x3 grid of invisible cells moves transform-origin so the photo zooms toward the part you point at.
Watch out for: A magnifier is only as good as the file behind it. Serve a separate large image for the zoom, and lazy-load it on hover so the grid does not pay for it.
3. Video previews on YouTube: Best for video libraries and course catalogues
Platform: Product pattern (YouTube on desktop)
YouTube's help centre describes the most familiar image hover on the web: rest on a video thumbnail on a computer and you get a short preview, about three seconds, before you commit. On mobile the same preview plays as you scroll past results in search. Viewers can switch the inline player off in settings, and YouTube says previews then turn on automatically for eligible videos.
The lesson for your own site is that a thumbnail is a promise and the preview checks it. On a course catalogue or a portfolio reel, a few silent seconds of motion tells someone more than any title.
Our Video Thumbnail Hover below fakes the pattern in pure CSS: the play button fades, the scene drifts and a progress bar fills, with no video file at all.
Watch out for: Real previews download video on hover. Keep clips short and muted, load them only after a short hover delay, and skip them entirely under prefers-reduced-motion.
4. Ideas for Subtle Hover Effects by Codrops: Best for portfolio and team grids with captions
Platform: HTML + CSS (3D transforms, pseudo-elements)
Manoela Ilic's 2014 Codrops set is still the reference for caption hovers. Each effect has a name, Lily, Sadie and more, and each is a figure with an image and a figcaption that reacts on hover: in Sadie, a gradient pseudo-element slides up from the bottom, the title moves up and turns white, and a second line of text fades in, all on 0.35s transitions. A second set of effects was added in October 2014.
It works because it is subtle. Thin lines, short moves and lots of white space let the photo stay the hero while the caption does its job. Ten years on, the markup is still the right markup: a real figure and figcaption, not divs.
Our Slide Up Caption below is a pure-CSS take on the same family: the title rests on a soft scrim, and on hover the caption rises to make room for a second line while an accent bar stretches.
Watch out for: The code predates unprefixed transforms and was written for desktop mice. Drop the vendor prefixes, and make sure the caption text that only appears on hover is also visible on touch screens.
5. Fancy Image Decorations by Temani Afif: Best for framing an image with no wrapper element at all
Platform: Pure CSS on a single img, CSS-Tricks series
Temani Afif's three-part CSS-Tricks series from 2022 starts from a hard rule: one img element, no wrapper, no pseudo-elements. Everything is drawn with gradients in the padding and border area, outline with outline-offset, clip-path and a few custom properties. On hover, four corner marks grow into a full frame, frame sides draw themselves in and retract the other way on mouse out, and straight edges appear to angle.
That constraint is the point. When your CMS hands you a bare image tag, you cannot add a wrapper or a caption div, and these effects still work. The later parts of the series move on to masks and outline-based animations.
Our Inset Border Draw below is a pure-CSS take on the frame reveal, though it uses a wrapper and two pseudo-elements rather than Temani's single element: a thin frame draws inside the photo, horizontals first, then verticals, and a title fades in.
Watch out for: Gradient-heavy single-element tricks are hard to read six months later. Leave a comment block explaining each variable, or the next person will rebuild it with divs.
6. Duotone with blend modes, Una Kravets' technique: Best for brand sites that tint every photo to the palette
Platform: Pure CSS (mix-blend-mode on pseudo-elements)
A duotone turns any photo into a two-colour print in your brand palette, which makes a grid of mismatched stock photos look like one set. José M. Pérez's 2017 write-up explains the CSS method he credits to Una Kravets: put the image on a div as a background, then lay two pseudo-elements over it, each with a colour and a blend mode, one using darken to set the highlights and one using lighten to set the shadows.
As a hover it is a strong move: the grid sits calm and on-brand, and the photo you point at washes back into full colour. Nothing downloads twice, because it is the same image under different blends.
Our Duotone to Color below is a pure-CSS version: a multiply layer and a lighten layer over a grayscale photo make the print, and hover fades them away.
Watch out for: Duotone kills contrast in dark photos and can wipe out faces. Test it on your real images, and check any text laid over the tinted image against both states.
7. CSSgram by Una Kravets: Best for photo filters that lift or fade on hover
Platform: CSS + Sass library, MIT, 25 filters
CSSgram is an Instagram-style filter library written in Sass and CSS, with 25 filters named after the originals, such as 1977, Aden and Valencia. Each one combines CSS filters with blend modes on before and after pseudo-elements, which is why the class goes on a containing figure rather than on the img itself.
For hover effects it gives you a ready-made resting state. Give the grid a muted filter, then remove it on hover so the image pops, or do the reverse to show the edited look. It has about 5.4k stars on GitHub.
The simplest member of this family needs no library at all: our Grayscale to Color below transitions filter from grayscale to full colour and grows the image a touch.
Watch out for: Animating filter repaints the image on every frame. On a large grid, cross-fade between two layers with opacity, which is cheaper, instead of transitioning filter values directly.
8. img-comparison-slider by sneas: Best for before and after photos: retouching, renovations, upscales
Platform: Web component, React, Angular, Vue, MIT
img-comparison-slider is a small web component for before and after images, under 4 kB gzipped, with wrappers for React, Angular and Vue. You drag a divider to compare the two; set the hover attribute and the slider moves automatically on mouse over, which turns it into a hover effect.
It is the right choice when the comparison is the content: photo retouching, renovation case studies, AI upscaling, cleaning products. The keyboard attribute is on by default, so people can move the divider with arrow keys, which most hand-rolled sliders forget.
Our Before and After Hover below is a pure-CSS take for when you do not need dragging: hover and the handle sweeps across, wiping the frame to the edited shot.
Watch out for: Hover-to-compare does nothing on touch. Keep the drag handle visible on phones, and make sure both images have the same dimensions or the comparison lies.
9. Direction-aware hover by Noel Delgado: Best for galleries where the overlay should follow the cursor in
Platform: CodePen concept
Noel Delgado's Direction-aware 3D hover effect concept is a CodePen classic, featured in wpDataTables' roundup of image hovers: the overlay enters from whichever edge the cursor came in through, so moving across a gallery feels like the overlay is being pushed by your hand.
It is a small detail that makes a grid feel physical. That is the whole idea of the pattern: enter from the left and the caption slides in from the left, leave through the bottom and it exits that way. It shines on large tiles in a gallery or a case study wall.
Our Direction Aware Hover below is a pure-CSS take: four invisible triangles sit on the card, and the one you cross grows over it, so the caption slides in from your entry edge with no JavaScript.
Watch out for: Direction only exists for a mouse. Keyboard and touch users need a sensible default entrance, so pick one edge for :focus-visible and make it the same every time.
10. hover-effect by Robin Delaporte: Best for agency hero images with a liquid WebGL transition
Platform: Three.js + GSAP, MIT
hover-effect is an open-source library for the liquid, distorted image transition you see on agency sites. Give it two images and a displacement map, and on hover it distorts the first into the second through a WebGL shader. Options cover intensity, angle and speed, 1.6 seconds in and 1.2 out by default, and it can blend two videos instead of images.
The displacement map is the creative lever: a noise texture gives a melt, stripes give a slice, a swirl gives a twist. Swap the map and the same two photos feel completely different. The repo has around 1.9k stars and credits Codrops for the original example.
This is the one effect here that CSS cannot fake well. If you want a no-WebGL alternative, a CSS cross-fade with a mask or a clip-path wipe is the closest, and our Image Hover Effects collection has several.
Watch out for: Each instance creates its own Three.js WebGL renderer, and browsers limit how many WebGL contexts a page can hold. Use it on a few hero images, not a 40-tile grid. The repo was last pushed in June 2023.
11. Image Trail Effects by Codrops: Best for portfolio landing pages that want a playful cursor
Platform: GSAP (TweenMax) + vanilla JS
Manoela Ilic's 2019 Codrops set turns the cursor into a brush: move over the hero and a trail of random images appears along your path, then drops, squeezes, scales or fades away depending on the demo. The article credits the idea to the VLNC Studio website, and one variant to Ricky Michiels' site.
It is an image hover in the widest sense. The hover target is the whole section, and the images are the reward for exploring. It suits stylists, photographers and studios with a deep stack of work to show in a few seconds.
The demos run on TweenMax and imagesLoaded, with six variations to compare.
Watch out for: TweenMax is the GSAP 2 API, so port it to GSAP 3 before reusing the code. The demo itself says to view it on desktop, so plan a static fallback for phones.
12. Our Scrolling Screenshot hover: Best for web design portfolios showing full-page screenshots
Platform: Motions directory, free, pure CSS Ours
Showing a website you built as a cropped thumbnail hides most of the work. Our Scrolling Screenshot puts a tall page screenshot inside a browser frame and scrolls it to the bottom while hovered, then glides back when you leave. One transform does it: 3 seconds down, 0.8 seconds back, so the exit never feels stuck.
It gives a full-page preview without a click, which is exactly what a client browsing your past work wants. Like every snippet in our Image Hover Effects collection, it ships with a prefers-reduced-motion guard and two custom properties for colour and size.
Watch out for: Very tall screenshots get heavy. Export them at the display width, compress them, and lazy-load anything below the fold.
13. Our Gallery Focus hover: Best for photo rows where one image should take the stage
Platform: Motions directory, free, pure CSS with :has() Ours
Hover one photo in our Gallery Focus row and it grows while its neighbours shrink, fade and lose their colour. The trick is :has(): the row dims its items only while one of them is hovered or has keyboard focus, so moving the cursor through the gaps between photos does not flash the whole row.
Daniel Schwarz's LogRocket guide to ways to use CSS :has() shows the same family of selector, blurring every card that is not hovered, and notes that :has() has been Baseline since 2023. Ours adds the :focus-visible half so Tab users get the same spotlight.
Watch out for: Dimming siblings hurts when people compare items side by side. Use it for showcases, not for product grids where the shopper needs to see three options at once.
How to choose an image hover effect
Match it to the question
Ask what the visitor wants to know before clicking. What is the back like: a second image swap, as in Dawn. Is the detail good: a zoom like Drift or our Zoom to Cursor. What is in the video: a preview. What changed: a before and after slider. If the answer is nothing, the effect is decoration, so keep it small.
Match it to the grid size
A grid of forty products wants transform and opacity only: a 3 percent scale, an opacity swap. WebGL effects like hover-effect and cursor trails belong on a hero or a portfolio with a handful of images. Filters, duotones and blurs sit in between, so test them on a mid-range phone before shipping a grid of them.
Match it to every input
Touch screens have no hover, so whatever the hover reveals must be visible or reachable without it. Mirror :hover with :focus-visible, scope decoration to @media (hover: hover), and give prefers-reduced-motion users a plain state change. Every snippet in our Image Hover Effects collection ships with that guard.
Put a better hover on your images today
Pick the question your images need to answer, then copy the closest demo from our Image Hover Effects collection or the wider Hover Effects directory. For whole cards rather than bare images, see our card hover effect examples.
Want one tuned to your own markup and photos? Paste your component or a screenshot into the creator, answer a few questions, and get production-ready CSS keyframes.
Make a hover effect for product photos in a 4-column shop grid. On hover and :focus-visible, cross-fade to the second product image and scale it from 1 to 1.03. Use 250ms ease-out, opacity and transform only, no filter animation. Under @media (hover: none), show only the first image with no motion. Under prefers-reduced-motion, keep the cross-fade but drop the scale.
Common questions
How do I make an image zoom on hover with CSS?
Wrap the image in a container with overflow: hidden, give the image a transition on transform, and scale it to around 1.05 to 1.1 on hover of the container. The wrapper clips the overflow so the layout never shifts. For a zoom that follows the cursor, see Drift or our Zoom to Cursor.
How do I show a second image on hover?
Stack both images in the same box, set the second to opacity: 0, and fade it to 1 on hover of the card. Shopify's Dawn theme does exactly this at 990px and wider, with a small scale to 1.03. Our Image Swap Hover is a copyable version.
Do image hover effects work on mobile?
Not as hover. Phones have no pointer resting over an image, and some fire hover on the first tap, which can swallow the tap that should open the link. Scope decorative effects to @media (hover: hover) and make any revealed caption or button visible by default on touch devices.
How do I make a grayscale image turn to color on hover?
Set filter: grayscale(1) on the image and transition it to grayscale(0) on hover. It is one property, but filter repaints, so on large grids a cross-fade between a grayscale copy and the colour image with opacity is cheaper. Our Grayscale to Color shows the simple version.
What is a direction-aware hover effect?
An overlay that slides in from whichever edge the cursor entered through and leaves through the edge it exits. It is usually done with a little JavaScript that compares the pointer position to the box, but it can be done in CSS with four invisible triangles, as in our Direction Aware Hover.
Sources
- Shopify Dawn theme source (component-card.css, card-product.liquid)
- imgix/drift on GitHub
- YouTube Help: Video previews
- Codrops: Ideas for Subtle Hover Effects
- CSS-Tricks: Fancy Image Decorations, Single Element Magic
- José M. Pérez: Duotone using CSS blend modes
- una/CSSgram on GitHub
- sneas/img-comparison-slider on GitHub
- wpDataTables: CSS image hover effects
- robin-dela/hover-effect on GitHub
- Codrops: Image Trail Effects
- LogRocket: Different ways to use CSS :has()