Collection of hand-picked free HTML and CSS image effect code examples (3d, animated, hover, magnify, overlay, transition, zoom, etc.) from Codepen, GitHub and other resources. Update of June 2021 collection. 21 new items.
Table of Contents
- 3D Images
- Image Hover Effects
- Image Magnify/Zoom Effects
- Image Overlay Effects
- Image Shadow Effects
- Image Transition and Animation Effects
- Simple Image Effects
Related Articles
3D Images
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Only 3D Trivision Billboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS 3D Image Hover Effects
Pure CSS direction-aware card hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
3D Sliced Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Flexible Multi-Panel Background
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
One Background for Multiple divs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
3D Image Hover CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
3D Perspective Image
3D perspective mouse hover image.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
3D Effect On Hover
3D hover effect - CSS only.
Made by Vincent Durand
February 13, 2017
Links
Made with
- HTML / CSS
About a code
CSS 3D Split Image Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Panoramic (Pure CSS)
Uses viewport units for 3D translate values, so it can only work in Chrome 34+/ Opera 21+. Uses transform-style: preserve-3d so no IE, not even 11.
Made by Ana Tudor
May 17, 2016
3D Thumb Image Hover Effect
3D CSS3 image hover effect with pseudo element shadow effect.
Made by MrPirrera
February 11, 2015
Image Hover Effects
Links
Made with
- HTML / CSS
About a code
Fancy Image Decoration on Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Circular Grid with Cool Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Triangular Grid of Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Image Mask Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Mask Effect with Triangles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Ripped Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
CSS Image Reveal
CSS image reveal with filter && clip-path.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Card Hover Info Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Image Hover with Clip-Path. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About a code
CSS Clip-Path Hover Effect
Animated CSS clip-path hover effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Image Hover 01
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Image Hover - CSS (filters & transitions)
Image presentation on hover using only CSS by taking advantage of transforms, filters, positioning, and pseudo-elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Glass Effect with CSS Masks
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Connections CSS Hover FX
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Piece CSS Hover FX
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Image Selector with Reflection
Using a radio buttons to select an image with some styling.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Anime Effect
CSS anime hover effect with mix-blend-mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Sliced Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Only Photo Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Kitties! Hover Images
No Edge support for pentagons and hover effect (because of clip-path... still looks decent though).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Image Hover Effect
Pure CSS image hover effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Glitch Effect for Image on Hover
Glitch effect with CSS clip-path without JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
Perspective Tilty Images
Just an experiment to get more familiar with transform: matrix3d() in CSS.
Links
Made with
- HTML
- CSS
About the code
Image Hover Effect
Image with reflection and proximity effect on hover.
Links
Made with
- HTML / CSS
About a code
Spotify Colorizer Effects Using CSS Blend Modes
15 Spotify colorizer-style image filters using CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
Image Hover Effect Blur
HTML and CSS image hover effect blur.
Made by Hervé
May 18, 2016
Image Revealing From Text On Hover
SVG clip path made of text reveals image on hover.
Made by web-tiki
December 7, 2015
Image Hover Animation
HTML and CSS image hover animation.
Made by Irem Lopsum
October 23, 2015
Links
Made with
- HTML / CSS
About a code
CSS Isometric Image Hover Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Image Hover Effect
HTML and CSS image hover effect.
Made by Hervé
October 27, 2014
Pure CSS Thumbnail Hover Effect
Thumbnail hover effect with HTML and CSS3.
Made by Ren Aysha
October 9, 2014
Image Magnify/Zoom Effects
Links
Made with
- HTML
- CSS
About the code
Zoom Image
Zoom image with scale.
Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
Image Cropped And Hover Zoom Effect
My image hover effect is a resized and cropped without background size. I used images in html code. It might be an idea for your next gallery!
No-JS On-Hover Image Zoom
No-JS on-hover image zoom effect with a variable grid.
Made by Daniel Cortes
April 22, 2016
Image Overlay Effects
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Image Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Image Hover Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Split Image on Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Portfolio Items with Five Transition Effects
Five transition effects for portfolo image items. Pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: material-icons.css
Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Image Hover Animation
Hover animation could be used for links to categories or post types. Also deals with skewing container while keeping background image straight.
Links
Made with
- HTML
- CSS
About the code
Image Overlay Effect
Pure CSS image overlay effect.
Links
Made with
- HTML / CSS
About the code
Colored Overlay
Colored overlay with box-shadow for images.
Image Overlay Effect
Image with title and caption on hover in HTML and CSS.
Made by LittleSnippets.net
April 29, 2016
Image Hover
Image with title, caption & icon on hover.
Made by LittleSnippets.net
February 16, 2016
Links
Made with
- HTML / CSS
About the code
Image Hover Effect
Simple and very nice pulsing image hover effect.
Image Overlay
Image overlay effect with title & icon.
Made by LittleSnippets.net
January 17, 2016
Image Hover
Image and title with slide up caption on hover.
Made by LittleSnippets.net
January 29, 2016
Image Hover
Image with double border effect on hover.
Made by LittleSnippets.net
December 23, 2015
Image Hover
Image overlay with title and caption.
Made by LittleSnippets.net
December 14, 2015
Image Overlay
Image hover with title and caption.
Made by LittleSnippets.net
December 7, 2015
Image Overlay Effect
Image hover effect with title and caption on hover.
Made by LittleSnippets.net
November 14, 2015
Image Hover Effect With Title & Caption
An image hover effect with title and animated caption on hover.
Made by LittleSnippets.net
November 7, 2015
Image Hover Effect With Icon And Split Caption
Image hover effect with rotating right icon to displaying a split caption.
Made by LittleSnippets.net
September 20, 2015
Image Hover Effect With Caption & Icons
Image hover effect with caption and slide down icons.
Made by LittleSnippets.net
August 29, 2015
Image Hover Effect With Icon
Simple image hover effect with bottom left page curl displaying a single icon.
Made by LittleSnippets.net
August 28, 2015
Image Hover Effect With Caption
Image hover effect. Expanding horizontal lines to display title and description.
Made by LittleSnippets.net
August 28, 2015
Image Overlay Effect With Caption
Image hover effect with expanding vertical line to produce title and description text.
Made by LittleSnippets.net
August 28, 2015
Image Hover Effect With Caption
Image hover effect. Sliding line to the left to display title and description.
Made by LittleSnippets.net
August 28, 2015
Image Scale
Only CSS image scale.
Made by Wifeo
August 29, 2014
Text Reveal On Hover
Text reveal on hover: flip down.
Made by David Leininger
July 5, 2013
Links
Made with
- HTML / CSS
About the code
Animated Covers
15 cool CSS animated image covers.
Image Shadow Effects
Links
Made with
- HTML / CSS (Less)
About a code
Image Glow Effect Using Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Realistic Image Shadows
Try changing the --size CSS variable to see how the images react.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Realistic Shadows to Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Colorful Shadows
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
iOS Shadow Effect With React
iOS style translucent image shadow effect as React component.
Made by martin banks
March 11, 2017
Image Transition and Animation Effects
Links
Made with
- HTML / CSS (Less)
About a code
CSS Animation Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Polygon Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tachyons.css
Links
Made with
- HTML (Slim) / CSS (SCSS)
About a code
Folding Panorama Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Slim) / CSS (SCSS)
About a code
Animated Untitled Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Image Transition
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Image Hover Effect
Image hover effect with slice transition.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Red Dead Redemption 2 Tintype Photo Reveal
Here's a simple recreation of the Red Dead Redemption 2 loading screen tintype photo transition effect. It uses a CSS animation to slide an ink reveal sprite sheet. This was inspired by the Codrop article "Transition Effect with CSS Masks" by Robin Delaporte.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
The Other Half
background-size & background-position are animatable.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About the code
img.fx
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About the code
Honeycomb
clip-path hexagon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Image Transition: Water Your Cat
Compact and clean code. No Edge support due to CSS variable/ calc() bugs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
border-radius
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Image Glitch Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About the code
Image with Winding Effect
clip-path:polygon(..) winding.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Spread Fx
Suppose there are two hidden planes that are going to be shown 1 by 1 when the shared container is hovered. E.g.
On hover, flips A (0.7s motion) then B (0.3s motion);
On mouseout, transit backward
We can do that by specifying transition-delay on two states:
/*hover state*/
A:hover { transition-delay:0 }/* A first */
B:hover { transition-delay:0.7s }/* 0.7s for A mo duration */
/*normal state (=mouseout state) */
A { transition-delay:0.3s }/* 0.3s for B mo duration */
B { transition-delay:0s }/* B first */
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Animated Image Clipping
Simple CSS animated image clipper, making various shapes using percentages.
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Concept Img Loader Using clip-path + filter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Sliding Blinds Effects
Using CSS custom properties, we can get a pretty fun result.
.jpg "Image Transition On Scroll(GSAP)")
Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jQuery.js, TweenMax.js)
About the code
Image Transition On Scroll(GSAP)
Transition inspiration from http://www.weareuprising.com/work/4.
Zutto Zoom Images
Zutto zoom images with HTML and CSS.
Made by Nathan Taylor
December 26, 2016
Image Transitions Using SVG Filters
This is inspired by Yoichi Kobayashi's GLSL based cross-image dissolve. This is a simpler version done using SVG filters - specifically the turbulence and component transfer primitives.
Made by Michael Mullany
September 20, 2016
Circular Image Transition
Circular image transition using CSS and TweenMax.
Made by Steve Gardner
August 25, 2016
Displacementmap Image Transition
Scroll effect / Image transition test for a project using PIXI for Webgl abstraction. Effect is made by drawing the image, scaling x, applying threshold and using that as a mask.
Made by Felix Nielsen
May 23, 2016
Three Image Transition
Three image transition with HTML, CSS and JavaScript.
Made by Jrsqn
May 10, 2016
Angled Full-Width Image Mask
Angled full-width image mask in HTML, CSS and JavaScript.
Made by Eric Jinks
April 12, 2015
Links
Made with
- HTML / CSS
About the code
2.5D
Attempting to recreate a 2.5D effect using CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
CSS3 Images Transition Hover
CSS3 images transition hover.
Made by Bobby
September 21, 2012
Simple Image Effects
Links
Made with
- HTML / CSS
About a code
Square in Square Grid Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Heart Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
SVG Image Mask
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS No DIV Sketch Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Stylus)
About a code
CSS Folded Poster Effect
Add a containing div to turn an image into a folded poster.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Halftone Portrait From .jpg Source
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Image with Backdrop Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: shorthand.css, pattern.css
Links
Made with
- HTML / CSS
About a code
Creating a Duotone with CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About the code
Luminance Edge
Image with luminance edges in HTML, CSS and SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Image Mosaic Effect with CSS Grids & Blend Modes
Uses CSS Grid Spec and mix-blend-mode to create a mosaic effect from a single image.