Collection of hand-picked free HTML and CSS image effect code examples: 3d, animated, hover, magnify, overlay, transition, zoom, etc. Update of April 2019 collection. 19 new items.

85 CSS Image Effects

Collection of hand-picked free HTML and CSS image effect code examples: 3d, animated, hover, magnify, overlay, transition, zoom, etc. Update of April 2019 collection. 19 new items.

Table of Contents

  1. 3D Images
  2. Image Hover Effects
  3. Image Magnify/Zoom Effects
  4. Image Overlay Effects
  5. Image Shadow Effects
  6. Image Transition and Animation Effects
  7. Simple Image Effects

Related Articles

  1. CSS Thumbnails
  2. HTML <figure> & <figcaption> with CSS

3D Images

Demo image: Flexible Multi-Panel Background

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Flexible Multi-Panel Background

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: One Background for Multiple divs

Author

  • Ivan Bogachev

Made with

  • HTML (Pug) / CSS (Less)

About a code

One Background for Multiple divs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shounak Ghosh

Made with

  • HTML / CSS

About a code

3D Image Hover CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Eriksen

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: -

Demo Image: 3D Effect On Hover
Demo Image: 3D Effect On Hover

3D Effect On Hover

3D hover effect - CSS only.
Made by Vincent Durand
February 13, 2017

Demo Image: Panoramic (Pure CSS)
Demo Image: Panoramic (Pure CSS)

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

Demo Image: 3D Thumb Image Hover Effect
Demo Image: 3D Thumb Image Hover Effect

3D Thumb Image Hover Effect

3D CSS3 image hover effect with pseudo element shadow effect.
Made by MrPirrera
February 11, 2015

Image Hover Effects

Author

  • Ryan Mulligan

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: -

Author

  • Noah Delagardelle

Made with

  • HTML / CSS (SCSS)

About a code

Image Hover 01

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Vlad Racoare

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: -

Demo image: Glass Effect with CSS Masks

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Glass Effect with CSS Masks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About a code

Connections CSS Hover FX

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About a code

Piece CSS Hover FX

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paul

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: -

Author

  • Rplus

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: -

Author

  • Jackie Keiser

Made with

  • HTML / CSS (SCSS)

About a code

Sliced Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Shaw

Made with

  • HTML / CSS (SCSS)

About the code

CSS Only Photo Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

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: -

Author

  • Mert Cukuren

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: -

Author

  • Ryan Yu

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: -

Demo image: Perspective Tilty Images

Author

  • Henry Desroches

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Perspective Tilty Images

Just an experiment to get more familiar with transform: matrix3d() in CSS.

Demo image: Image Hover Effect

Author

  • Tiago Alexandre Lopes

Made with

  • HTML
  • CSS

About the code

Image Hover Effect

Image with reflection and proximity effect on hover.

Demo image: CSS Gradient Hover Effect

Author

  • Jon Daiello

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.

Demo Image: Image Hover Effect Blur
Demo Image: Image Hover Effect Blur

Image Hover Effect Blur

HTML and CSS image hover effect blur.
Made by Hervé
May 18, 2016

Demo Image: Image Revealing From Text On Hover
Demo Image: Image Revealing From Text On Hover

Image Revealing From Text On Hover

SVG clip path made of text reveals image on hover.
Made by web-tiki
December 7, 2015

Demo Image: Image Hover Animation
Demo Image: Image Hover Animation

Image Hover Animation

HTML and CSS image hover animation.
Made by Irem Lopsum
October 23, 2015

Demo Image: Image Hover Effect
Demo Image: Image Hover Effect

Image Hover Effect

HTML and CSS image hover effect.
Made by Hervé
October 27, 2014

Demo Image: Pure CSS Thumbnail Hover Effect
Demo Image: Pure CSS Thumbnail Hover Effect

Pure CSS Thumbnail Hover Effect

Thumbnail hover effect with HTML and CSS3.
Made by Ren Aysha
October 9, 2014

Image Magnify/Zoom Effects

Demo image: Zoom Image

Author

  • Omar Dsoky

Made with

  • HTML
  • CSS

About the code

Zoom Image

Zoom image with scale.

Demo image: Image Cropped And Hover Zoom Effect

Author

  • Sara B.

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!

Demo Image: No-JS On-Hover Image Zoom
Demo Image: No-JS On-Hover Image Zoom

No-JS On-Hover Image Zoom

No-JS on-hover image zoom effect with a variable grid.
Made by Daniel Cortes
April 22, 2016

Demo Image: Romantic Zoom Effect
Demo Image: Romantic Zoom Effect

Romantic Zoom Effect

A pure CSS zoom effect.
Made by Adrien Bachmann
January 31, 2016

Image Overlay Effects

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About a code

Image Hovers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • YJ

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Split Image on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Natali Davydova

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

Demo image: Image Hover Animation

Author

  • Collin Smith

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.

Demo image: Image Overlay Effect

Author

  • YaroslavW

Made with

  • HTML
  • CSS

About the code

Image Overlay Effect

Pure CSS image overlay effect.

Demo image: Colored Overlay

Author

  • Preethi

Made with

  • HTML / CSS

About the code

Colored Overlay

Colored overlay with box-shadow for images.

Demo Image: Image Overlay Effect
Demo Image: Image Overlay Effect

Image Overlay Effect

Image with title and caption on hover in HTML and CSS.
Made by LittleSnippets.net
April 29, 2016

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image with title, caption & icon on hover.
Made by LittleSnippets.net
February 16, 2016

Demo image: Image Hover Effect

Author

  • Alex Raven

Made with

  • HTML / CSS

About the code

Image Hover Effect

Simple and very nice pulsing image hover effect.

Demo Image: Image Overlay
Demo Image: Image Overlay

Image Overlay

Image overlay effect with title & icon.
Made by LittleSnippets.net
January 17, 2016

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image and title with slide up caption on hover.
Made by LittleSnippets.net
January 29, 2016

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image with double border effect on hover.
Made by LittleSnippets.net
December 23, 2015

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image overlay with title and caption.
Made by LittleSnippets.net
December 14, 2015

Demo Image: Image Overlay
Demo Image: Image Overlay

Image Overlay

Image hover with title and caption.
Made by LittleSnippets.net
December 7, 2015

Demo Image: Image Overlay Effect
Demo Image: Image Overlay Effect

Image Overlay Effect

Image hover effect with title and caption on hover.
Made by LittleSnippets.net
November 14, 2015

Demo Image: Image Hover Effect With Title & Caption
Demo Image: Image Hover Effect With Title & Caption

Image Hover Effect With Title & Caption

An image hover effect with title and animated caption on hover.
Made by LittleSnippets.net
November 7, 2015

Demo Image: Image Hover Effect With Icon And Split Caption
Demo Image: Image Hover Effect With Icon And Split Caption

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

Demo Image: Image Hover Effect With Caption & Icons
Demo Image: Image Hover Effect With Caption & Icons

Image Hover Effect With Caption & Icons

Image hover effect with caption and slide down icons.
Made by LittleSnippets.net
August 29, 2015

Demo Image: Image Hover Effect With Icon
Demo Image: Image Hover Effect With Icon

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

Demo Image: Image Hover Effect With Caption
Demo Image: Image Hover Effect With Caption

Image Hover Effect With Caption

Image hover effect. Expanding horizontal lines to display title and description.
Made by LittleSnippets.net
August 28, 2015

Demo Image: Image Overlay Effect With Caption
Demo Image: Image Overlay Effect With Caption

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

Demo Image: Image Hover Effect With Caption
Demo Image: Image Hover Effect With Caption

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

Demo Image: Image Scale
Demo Image: Image Scale

Image Scale

Only CSS image scale.
Made by Wifeo
August 29, 2014

Demo Image: Text Reveal on Hover
Demo Image: Text Reveal On Hover

Text Reveal On Hover

Text reveal on hover: flip down.
Made by David Leininger
July 5, 2013

Demo image: Animated Covers

Author

  • Mojtaba Seyedi

Made with

  • HTML / CSS

About the code

Animated Covers

15 cool CSS animated image covers.

Image Shadow Effects

Demo image: Colorful Shadows

Author

  • Mojtaba Seyedi

Made with

  • HTML / CSS

About a code

Colorful Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo Image: iOS shadow effect with React
Demo Image: iOS Shadow Effect With React

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

Author

  • Bennett Feely

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Animated Untitled Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Image Transition

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Image Transition

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @mandycodestoo

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: -

Author

  • Lee Martin

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: -

Author

  • ycw

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: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS

About the code

img.fx

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS

About the code

Honeycomb

clip-path hexagon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

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: -

Author

  • Alain

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Image Glitch Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ycw

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: -

Author

  • ycw

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: -

Demo image: Animated Image Clipping

Author

  • Porgeee

Made with

  • HTML / CSS

About the code

Animated Image Clipping

Simple CSS animated image clipper, making various shapes using percentages.

Demo image: Sliding Blinds Effects

Author

  • Christopher Kirk-Nielsen

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Sliding Blinds Effects

Using CSS custom properties, we can get a pretty fun result.

Demo Image: Zutto Zoom Images
Demo Image: Zutto Zoom Images

Zutto Zoom Images

Zutto zoom images with HTML and CSS.
Made by Nathan Taylor
December 26, 2016

Demo Image: Image Transitions Using SVG Filters
Demo Image: Image Transitions Using SVG Filters

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

Demo Image: Circular Image Transition
Demo Image: Circular Image Transition

Circular Image Transition

Circular image transition using CSS and TweenMax.
Made by Steve Gardner
August 25, 2016

Demo Image: Displacementmap Image Transition
Demo Image: Displacementmap Image Transition

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

Demo Image: Three Image Transition
Demo Image: Three Image Transition

Three Image Transition

Three image transition with HTML, CSS and JavaScript.
Made by Jrsqn
May 10, 2016

Demo Image: Angled Full-Width Image Mask
Demo Image: Angled Full-Width Image Mask

Angled Full-Width Image Mask

Angled full-width image mask in HTML, CSS and JavaScript.
Made by Eric Jinks
April 12, 2015

Author

  • Matt Drew

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: -

Demo Image: CSS3 Images Transition Hover
Demo Image: CSS3 Images Transition Hover

CSS3 Images Transition Hover

CSS3 images transition hover.
Made by Bobby
September 21, 2012

Simple Image Effects

Demo image: Image with Backdrop Effect

Author

  • Bansal

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

Demo image: Creating a Duotone with CSS

Author

  • jeremy osborn

Made with

  • HTML / CSS

About a code

Creating a Duotone with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ycw

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: -

Demo image: Image Mosaic Effect with CSS Grids & Blend Modes

Author

  • Dudley Storey

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.

back to top