Table of Contents
Amazing CSS Image Effects (Free Code + Demos)
Image Mosaic Effect With CSS Grids & Blend Modes

Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: March 11, 2018
Made with: HTML, SCSS
Tags: image, effect, portrait
Photo Modal (CSS Only)

Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: July 17, 2018
Made with: HTML, SCSS, JS
Tags: css, modal, photo, slice, splitting
CSS Gradient Hover Effect

Author: Jon Daiello (jondaiello)
Links: Source Code / Demo
Created on: August 29, 2016
Made with: HTML, SCSS
Tags: css-gradient, mix-blend-mode, gradient hover effect
Portfolio Items CSS3 Transitions Effects

Author: foxeisen (fox_hover)
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, SCSS
Tags: css3, css, hover-effects, portfolio effects
Spread

Author: ycw (ycw)
Links: Source Code / Demo
Created on: June 3, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gallery, note
Image With Backdrop Effect

Author: Bansal (bansal-io)
Links: Source Code / Demo
Created on: April 25, 2020
Made with: HTML
Tags: css, image, filter, gallery, slide
Luminance Edge

Author: ycw (ycw)
Links: Source Code / Demo
Created on: March 8, 2019
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Image Hover-1482

Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: April 29, 2016
Made with: HTML, CSS, JS
Image Hover-1401

Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: February 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover
When Life Gives You Lemons

Author: Collin Smith (collinscode)
Links: Source Code / Demo
Created on: April 12, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: hover, animation, ui, links, transform
Image Selector With Reflection

Author: Paul (Paul2512C)
Links: Source Code / Demo
Created on: November 1, 2019
Made with: HTML, CSS
Tags: css, radio, image, cpc-image-hovers
3D Image Hover CSS

Author: Shounak Ghosh (shounak-ghosh)
Links: Source Code / Demo
Created on: September 29, 2018
Made with: HTML, CSS
Image Glitch Effect

Author: Alain (AlainBarrios)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Winding

Author: ycw (ycw)
Links: Source Code / Demo
Created on: June 9, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: poc, img.fx
I hope you like this Amazing CSS Image Effects article.
Also Read :
- CSS Responsive List View Examples
- CSS Profile Card Design
- jQuery CSS Loading Animation
- Top 10 VS Code extensions