51 CSS Image Effects

May 30, 2017 | by Vladimir Stepura

Collection of hand-picked free HTML and CSS image effects with little JavaScript: 3d, hover, magnify, overlay, transition, zoom. Demo and download code (*zip).

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 Effects

3D Images

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: Fluid Twisting Image 3D
Demo Image: Fluid Twisting Image 3D

Fluid Twisting Image 3D

Drag over the image it should twist around in CSS3D space. Now updated to work on iPad + IE10 + speed improvements on iPad.
Made by dehash
September 8, 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

Demo Image: CSS 3D Panorama
Demo Image: CSS 3D Panorama

CSS 3D Panorama

HTML and CSS 3D panorama.
Made by Dmitriy Karpov
May 16, 2014

Image Hover Effects

Demo Image: Image Tilt Effect On Hover
Demo Image: Image Tilt Effect On Hover

Image Tilt Effect On Hover

GSAP image tilt effect on hover with image layers.
Made by jim
July 7, 2016

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 Hover
Demo Image: Image Hover

Image Hover

Image with slow pan right on hover.
Made by LittleSnippets.net
January 17, 2016

Demo Image: SVG Clip-Path Hover Effect
Demo Image: SVG Clip-Path Hover Effect

SVG Clip-Path Hover Effect

Attempt to re-create CJ Gammon’s portfolio grid hover effect using SVG clip-path and CSS Transitions. Note: this is an experiment, it does not seem to work on Firefox 43.0.4 neither have touch support. Tested on Chrome 47.0.2526.106, Opera 34.0 and Safari 8.0.6.
Made by Noel Delgado
January 15, 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: Hover To Reveal Part Of Background Image
Demo Image: Hover To Reveal Part Of Background Image

Hover To Reveal Part Of Background Image

This is really simple demo. All what you need is div with background-attachment: fixed and change of left+top on mousemove.
Made by Nikolay Talanov
November 3, 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: Tracking Image Hover Effect
Demo Image: Tracking Image Hover Effect

Tracking Image Hover Effect

Mouse hover effect that tracks the users mouse and moves the image along with it.
Made by Bergability
July 17, 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: Magnifying Effect
Demo Image: Magnifying Effect

Magnifying Effect

Image magnifying effect with HTML, CSS and JavaScript.
Made by Blake Bowen
July 28, 2016

Demo Image: CSS Magnify
Demo Image: CSS Magnify

CSS Magnify

HTML, CSS and JavaScript magnify.
Made by Tia Aoake
July 6, 2016

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

Demo Image: Magnifying Glass Effect
Demo Image: Magnifying Glass Effect

Magnifying Glass Effect

Greyscale magnifying glass effect.
Made by Hugo DarbyBrown
May 28, 2014

Image Overlay Effects

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image with button on hover.
Made by LittleSnippets.net
October 26, 2016

Demo Image: Image Overlay
Demo Image: Image Overlay

Image Overlay

Image and title with caption on hover.
Made by LittleSnippets.net
April 18, 2016

Demo Image: Image Hover
Demo Image: Image Hover

Image Hover

Image with title and subtitle on hover.
Made by LittleSnippets.net
December 14, 2016

Demo Image: Image Overlay
Demo Image: Image Overlay

Image Overlay

Rounded images with icon on hover.
Made by LittleSnippets.net
October 10, 2016

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 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: Direction-Aware 3D Hover Effect
Demo Image: Direction-Aware 3D Hover Effect

Direction-Aware 3D Hover Effect

Direction-aware hover effect. CSS & bits of JS.
Made by Noel Delgado
October 30, 2014

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

Image Shadow Effects

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

Demo Image: iOS 10 Style Shadows
Demo Image: iOS 10 Style Shadows

iOS 10 Style Shadows

iOS 10 style shadows with CSS.
Made by Mathias Madsen Stav
November 25, 2016

Image Transition Effects

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

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

FreeFrontend © 2016 - 2017

Back to top