Amazing CSS Image Effects

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.