95+ Amazing CSS Image Effects [Free Code + Demos]
Enjoy this 100% free and open source collection of curated HTML and CSS image effect code examples. This list includes 3d, hover, magnify, overlay, transition, zoom, and animated image effects.
1. Flexible Multi-panel Background
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: October 17, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, clip-path, 3d, jade
2. One Background For Multiple Divs
Author: Ivan Bogachev (sfi0zy)
Links: Source Code / Demo
Created on: October 16, 2019
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: Babel
HTML Pre-processor: Pug
3. 3D Image Hover CSS
Author: Shounak Ghosh (shounak-ghosh)
Links: Source Code / Demo
Created on: September 29, 2018
Made with: HTML, CSS
4. 3D Perspective Mouse Hover Image
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 29, 2018
Made with: HTML, CSS
5. CSS Clip-Path Hover Effect
Created for the Image Hovers CodePen Challenge.
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: April 24, 2020
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: clip-path, css-animation, mix-blend-mode, codepenchallenge, cpc-image-hovers
6. CPC · Image Hover · 01
Author: Noah Delagardelle (NoahDelagardelle)
Links: Source Code / Demo
Created on: April 22, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge
7. Image Hover - CSS (filters & Transitions)
Image presentation on hove using only CSS by taking advantage of transforms, filters, positioning and pseudo-elements
Author: Vlad Racoare (vladracoare)
Links: Source Code / Demo
Created on: April 20, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge, transition, hover, image
8. Glass Effect With CSS Masks
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: March 17, 2020
Made with: HTML, SCSS
9. "Connection" - CSS Hover FX
Author: ycw (ycw)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
10. Piece{css Hover Fx}
Author: ycw (ycw)
Links: Source Code / Demo
Created on: January 5, 2020
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: poc
11. Image Selector With Reflection
Using a radio buttons to select an image with some styling. Not yet optimized for mobile friendly viewing.
Author: Paul (Paul2512C)
Links: Source Code / Demo
Created on: November 1, 2019
Made with: HTML, CSS
Tags: css, radio, image, cpc-image-hovers
12. [CSS] Anime Effect: 鬼滅の刃
Author: Rplus (Rplus)
Links: Source Code / Demo
Created on: September 24, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: anime, image-effect, mix-blend-mode
13. Sliced Image
Author: Jackie Keiser (MongooseDoom)
Links: Source Code / Demo
Created on: September 3, 2019
Made with: HTML, SCSS
14. Photo Modal (CSS Only)
Asset for upcoming "Uncomfortable Development" talk at CodePen Houston ( July 17 @ 6:30pm ) , adapted from uncomfortable.ellcreative.com https://nvite.com/CodePenHouston/w8eolg
Author: Shaw (shshaw)
Links: Source Code / Demo, Nvite.com
Created on: July 17, 2018
Made with: HTML, SCSS, JS
Tags: css, modal, photo, slice, splitting
15. Kitties! (hover Images)
Watch me code this in 10 minutes (you can speed it up if I'm too slow) . No Edge support for pentagons and hover effect (because of clip-path... still looks decent though). If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 31, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, jade, sass, flexbox, clip-path
16. Image Hover Effect
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
Created on: March 7, 2019
Made with: HTML, SCSS
Tags: css, hover, animation, hover-effect, effect
17. Glitch Effect On Hover
Learn how to create the glitch effect with CSS clip-path without JS.
Author: Ryan Yu (iamryanyu)
Links: Source Code / Demo
Created on: March 17, 2018
Made with: HTML, SCSS
Tags: ryan yu, glitch effect, css-animation, clip-path, frontend30
18. Perspective Tilty Images
Just an experiment to get more familiar with transform: matrix3d() in CSS! Feedback welcome, as usual -- I'd love to hear how I can improve this!
Author: Henry Desroches (xdesro)
Links: Source Code / Demo
Created on: September 28, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, perspective, matrix3d
19. Image With Reflection And Proximity Effect On Hover
Author: Tiago Alexandre Lopes (TiagoLopes)
Links: Source Code / Demo
Created on: June 2, 2017
Made with: HTML, CSS
20. CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
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
21. Zoom IMage With Scale
Omar Dsoky Zoom iMage with scale
Author: Omar Dsooky (linux)
Links: Source Code / Demo
Created on: August 6, 2017
Made with: HTML, CSS
Tags: zoom, image, scale, transform, odsoky
22. 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! :)
Author: Sara B. (sara_bianchi94)
Links: Source Code / Demo
Created on: June 26, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: resized, cropped, hover, zoom, gallery
23. Split Image On Hover
Author: YJ (John_Tsai)
Links: Source Code / Demo
Created on: January 2, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
24. Portfolio Items CSS3 Transitions Effects
Portfolio Items CSS3 transitions effects (pure CSS3)
Author: foxeisen (fox_hover)
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, SCSS
Tags: css3, css, hover-effects, portfolio effects
25. When Life Gives You Lemons
Hover animation could be used for links to categories or post types. Also deals with skewing container while keeping background image straight. Take a look!
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
26. Css Image Hover Effects
Author: YaroslavW (YaroslavW)
Links: Source Code / Demo
Created on: August 28, 2017
Made with: HTML, CSS
27. Colored Overlay Using "box-shadow"
Author: Preethi Sam (rpsthecoder)
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, CSS
28. Simple Pulsing Image Hover Effect
Author: Alex Raven (asraven)
Links: Source Code / Demo
Created on: January 31, 2016
Made with: HTML, CSS
29. Animated Covers
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: May 8, 2013
Made with: HTML, CSS, JS
30. Colorful Shadows
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML, CSS, JS
Tags: shadow, image, filter
31. Animated CSS Image
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo
Created on: March 25, 2020
Made with: Slim, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
32. THREE Image Transition
Shader powered image transition
Author: Szenia Zadvornykh (zadvorsky)
Links: Source Code / Demo
Created on: May 4, 2016
Made with: HTML, CSS, JS
Tags: threejs, gsap, animation
33. Image Hover Effect - 4
Author: @mandycodestoo (mandycodestoo)
Links: Source Code / Demo
Created on: November 25, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
34. 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. Ok, back to the game...
Author: Lee Martin (leemartin)
Links: Source Code / Demo, Tutorial
Created on: November 3, 2018
Made with: HTML, CSS
Tags: red dead redemption 2, tintype, photo, reveal, transition
35. TheOtherHalf
Author: ycw (ycw)
Links: Source Code / Demo
Created on: September 23, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: img.fx
36. AndyWarhol..ish
Author: ycw (ycw)
Links: Source Code / Demo
Created on: September 22, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: img.fx
37. Honeycomb
clip-path hexagon
Author: ycw (ycw)
Links: Source Code / Demo
Created on: August 30, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gallery, note
38. Water Your Cat (no Edge Support)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: August 11, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: transform, checkbox-hack, css-variables, 3d
39. 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
40. 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
41. 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
42. Animated Image Clipping ✂️
Simple CSS animated image clipper, making various shapes using percentages.
Author: Porgeee (GeorgePorgee)
Links: Source Code / Demo
Created on: April 30, 2018
Made with: HTML, CSS
Tags: css, codenewbie, clipping, animation
43. Sliding Blinds Effects With The Hoff
Using CSS custom properties, we can get a pretty fun result.
Author: Christopher Kirk-Nielsen (chriskirknielsen)
Links: Source Code / Demo
Created on: February 2, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: neon, animation, photo, the hoff, sliding blinds
44. Image Transition On Scroll (GSAP)
Author: Yugam (pizza3)
Created on: June 29, 2017
Made with: HTML, SCSS, Babel
Tags: gsap, animation, slider, transition
45. 2.5D
Early work: Attempting to recreate a 2.5D effect using CSS.
Author: Matt Drew (highplainsdrifter)
Links: Source Code / Demo
Created on: January 13, 2014
Made with: HTML, CSS
Tags: parallax, 3d, photo, transition, filters
46. 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
47. Creating A Duotone With CSS (Completed)
Author: jeremy osborn (josborn)
Created on: May 6, 2019
Made with: HTML, CSS
Tags: mix-blend-mode, duotone, css, take 5, jazz
48. 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
49. 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. Photograph by Christoph Ruhrmann, used under a Creative Commons license.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: March 11, 2018
Made with: HTML, SCSS
Tags: image, effect, portrait
50. 3D Effect On Hover - CSS Only
3D hover effect - CSS only
Author: Vincent Durand (onediv)
Links: Source Code / Demo
Created on: February 2, 2017
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: nojs, css3, css-only, pure-css
51. Panoramic (Pure CSS)
Image may take a bit to load. 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. Tested and works in Firefox 29, Chrome 34.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 1, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: 3d, animation, transform, sass
52. 3D Thumb Image Hover Effect
3D CSS3 Hover Effect with Pseudo Element Shadow Effect
Author: MrPirrera (pirrera)
Links: Source Code / Demo
Created on: April 14, 2014
Made with: HTML, CSS, JS
53. Hover Effect Blur
Author: Hervé (herve)
Links: Source Code / Demo
Created on: October 24, 2014
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: blur, hover-effect, header, cssonly
54. Image Revealing From Text On Hover
SVG clip path made of text reveals image on hover.
Author: web-tiki (web-tiki)
Links: Source Code / Demo
Created on: December 5, 2015
Made with: HTML, CSS
Tags: svg, hover, image-reveal, hover-effect, transition
55. Image Hover Animation
Author: Irem Lopsum (iremlopsum)
Links: Source Code / Demo
Created on: October 23, 2015
Made with: HTML, SCSS
56. Image Hover Effect
And a new image appear...
Author: Hervé (herve)
Links: Source Code / Demo
Created on: October 27, 2014
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-only, hover, image-effect, background, no-js
57. Pure CSS Thumbnail Hover Effect
This was inspired by an old blog post of Sohtanaka. He had created a similar effect using jQuery. I decided to replicate the same effect with CSS3. My final result is slightly different compared to his but it is still the same effect. Link to the original tutorial and demo is included in t...Read More
Author: Aysha Anggraini (rrenula)
Links: Source Code / Demo
Created on: November 21, 2013
Made with: HTML, CSS
Tags: hover-effect, css3, thumbnail
58. No-JS On-Hover Image Zoom
No-JS on-hover image zoom effect with a variable grid. Heavily inspired by this post.
Author: Daniel Cortes (dgca)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scss, css, html, no-js
59. Romantic Zoom Effect
A pure CSS zoom effect.
Author: Adrien Bachmann (AdrienBachmann)
Links: Source Code / Demo
Created on: January 31, 2016
Made with: HTML, SCSS, JS
Tags: css, zoom, animation, 3d, parallax
60. #1482 - Image Hover
Image with title and caption on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: April 29, 2016
Made with: HTML, CSS, JS
61. #1401 - Image Hover
Image with title, caption & icon on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: February 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover
62. #1321 - Image Hover
Image hover effect with title & icon
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: January 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover
63. #1361 - Image Hover
Image and title with slide up caption on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: January 29, 2016
Made with: HTML, CSS, JS
Tags: image-hover
64. #1295 - Image Hover
Image with double border effect on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 23, 2015
Made with: HTML, CSS, JS
Tags: image-hover
65. #1273 - Image Hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover
66. #1256 - Image Hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 7, 2015
Made with: HTML, CSS, JS
Tags: £d, image-hover
67. #1206 - Image Hover Effect With Caption
Image hover effect with title and caption on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover-effect, image-hover, image card, caption
68. #1190 - Image Hover Effect With Title & Caption
An image hover effect with title and animated caption on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 7, 2015
Made with: HTML, CSS, JS
Tags: image-hover, retro, css3
69. #1033 - Image Hover Effect With Icon And Split Caption
Image hover effect with rotating right icon to displaying a split caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 31, 2015
Made with: HTML, CSS, JS
Tags: image-hover, css3, icon
70. #1029 - Image Hover Effect With Caption & Icons
Image hover effect with caption and slide down icons
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 29, 2015
Made with: HTML, CSS, JS
Tags: image, hover, icons, css3, caption
71. #1023 - Image Hover Effect With Icon
Simple image hover effect with bottom left page curl displaying a single icon
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML, CSS, JS
Tags: image, hover, css3, icon
72. #1019 - Image Hover Effect With Caption
Image hover effect with expanding vertical line to produce title and description text
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text
73. #0016 - Image Hover Effect With Caption
Image hover effect. Sliding line to the left to display title and description.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text, lines
74. CSS HOVER INFORMATION
Author: Wifeo (wifeo)
Links: Source Code / Demo
Created on: August 27, 2014
Made with: HTML, CSS, JS
Tags: css, hover, animation, scale, navigation
75. Text Reveal On Hover: Flip Down
Trying to come up with new hover effects that I haven't seen on the web yet.
Author: David Leininger (davidleininger)
Links: Source Code / Demo
Created on: June 24, 2013
Made with: HTML, SCSS
Tags: css, hover, transition, 3d
76. IOS Shadow Effect With React
iOS style translucent image shadow effect as React component
Author: martin banks (martin-banks)
Links: Source Code / Demo
Created on: December 2, 2016
Made with: HTML, CSS, Babel
77. Zutto Zoom Images
Author: Nathan Taylor (nathantaylor)
Links: Source Code / Demo
Created on: December 25, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
78. Circular Image Transition
Circular image transition using CSS and TweenMax
Author: Steve Gardner (steveg3003)
Links: Source Code / Demo
Created on: June 11, 2016
Made with: HTML, SCSS, JS
Tags: tweenmax, css, transition
79. Angled Full-width Image Mask
Author: Eric Jinks (Jinksi)
Links: Source Code / Demo
Created on: April 11, 2015
Made with: HTML, SCSS, JS
Tags: mask, angle
80. CSS3 Images Transition Hover
CSS3 images transition hover. inspired by http://jobyj.in/adipoli/#demo, images from lorempixel.com. for full view: http://codepen.io/ImBobby/full/Gkidn
Author: Bobby (ImBobby)
Links: Source Code / Demo
Created on: September 21, 2012
Made with: HTML, CSS, JS
Tags: images, transition, hover, css3
81. Polaroid Images [HTML/CSS]
Author: Jack Cranston (jackcranston)
Links: Source Code / Demo
Created on: October 5, 2017
Made with: HTML, CSS
82. CSS Nugget: Styling Siblings On Hover
More info: https://codyhouse.co/nuggets/styling-siblings-on-hover
Author: CodyHouse (codyhouse)
Links: Source Code / Demo
Created on: May 18, 2020
Made with: HTML, SCSS
83. Clip Blinds
Author: Subin (meemaw1)
Links: Source Code / Demo
Created on: September 28, 2018
Made with: HTML, CSS
Tags: clip, css, image, background, glass
84. HBD Michael 13allack 😄 - Poster
Happy 42nd Birthday to my footballing idol, Der Little Kaiser, Michael Ballack :D I'm a little late with this(his birthday is on 26th Sept) due to work and stuff but anyways it was fun coding this pen. This design is inspired from the poster my little brother designed and gifted me for m...Read More
Author: Sibi13 (sibi13)
Links: Source Code / Demo
Created on: September 26, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css blend modes, gradient, background-clip, knockout text, ballack
85. CSS-only Directionally Aware Hover
Using :hover and the sibling selector (~), we can apply different styles to elements based on their position. Removing the visibility transition gets rid of the previous element's ghost for a cleaner slide-in with no slide-out. Layout and images are auto-generated with Pug. Refresh for so...Read More
Author: Giana (giana)
Links: Source Code / Demo
Created on: March 5, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, gallery, animation, transition, hover
86. Parallax Flipping Cards
Author: Nicolas Pavlotsky (nicolaspavlotsky)
Links: Source Code / Demo
Created on: July 31, 2017
Made with: HTML, CSS
87. Looking Through Dirty Glass
Inspired by the opening credits of The Walking Dead.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: May 23, 2017
Made with: HTML, CSS
Tags: the-walking-dead, animation, dirty glass
88. Ken Burns Effect CSS Only
Ken Burns effect CSS only
Author: Dima (dimaZubkov)
Links: Source Code / Demo
Created on: June 10, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animate, slideshow, fullpage
89. Scrolling Half By Half Pure
A Split screen gallery
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: August 6, 2017
Made with: HTML, CSS
Tags: gallery, pure-css, scroll, impocssible
90. Ken Burns Effect - Pure Css
Full width image with pure css Ken Burns effect
Author: Saijo George (SaijoGeorge)
Links: Source Code / Demo
Created on: January 29, 2017
Made with: HTML, CSS
Tags: kens burns, pure-css
Image Magnify/Zoom Effects
1. Zoom IMage With Scale
Omar Dsoky Zoom iMage with scale
Author: Omar Dsooky (linux)
Links: Source Code / Demo
Created on: August 6, 2017
Made with: HTML, CSS
Tags: zoom, image, scale, transform, odsoky
2. 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! :)
Author: Sara B. (sara_bianchi94)
Links: Source Code / Demo
Created on: June 26, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: resized, cropped, hover, zoom, gallery
3. No-JS On-Hover Image Zoom
No-JS on-hover image zoom effect with a variable grid. Heavily inspired by this post.
Author: Daniel Cortes (dgca)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scss, css, html, no-js
4. Romantic Zoom Effect
A pure CSS zoom effect.
Author: Adrien Bachmann (AdrienBachmann)
Links: Source Code / Demo
Created on: January 31, 2016
Made with: HTML, SCSS, JS
Tags: css, zoom, animation, 3d, parallax
Image Shadow Effects
1. Colorful Shadows
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML, CSS, JS
Tags: shadow, image, filter
2. IOS Shadow Effect With React
iOS style translucent image shadow effect as React component
Author: martin banks (martin-banks)
Links: Source Code / Demo
Created on: December 2, 2016
Made with: HTML, CSS, Babel
Simple Image Effects
1. 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
2. Creating A Duotone With CSS (Completed)
Author: jeremy osborn (josborn)
Created on: May 6, 2019
Made with: HTML, CSS
Tags: mix-blend-mode, duotone, css, take 5, jazz
3. 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
4. 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. Photograph by Christoph Ruhrmann, used under a Creative Commons license.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: March 11, 2018
Made with: HTML, SCSS
Tags: image, effect, portrait
Image Hover Effects
1. CSS Clip-Path Hover Effect
Created for the Image Hovers CodePen Challenge.
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: April 24, 2020
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: clip-path, css-animation, mix-blend-mode, codepenchallenge, cpc-image-hovers
2. CPC · Image Hover · 01
Author: Noah Delagardelle (NoahDelagardelle)
Links: Source Code / Demo
Created on: April 22, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge
3. Image Hover - CSS (filters & Transitions)
Image presentation on hove using only CSS by taking advantage of transforms, filters, positioning and pseudo-elements
Author: Vlad Racoare (vladracoare)
Links: Source Code / Demo
Created on: April 20, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge, transition, hover, image
4. Glass Effect With CSS Masks
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: March 17, 2020
Made with: HTML, SCSS
5. "Connection" - CSS Hover FX
Author: ycw (ycw)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
6. Piece{css Hover Fx}
Author: ycw (ycw)
Links: Source Code / Demo
Created on: January 5, 2020
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: poc
7. Image Selector With Reflection
Using a radio buttons to select an image with some styling. Not yet optimized for mobile friendly viewing.
Author: Paul (Paul2512C)
Links: Source Code / Demo
Created on: November 1, 2019
Made with: HTML, CSS
Tags: css, radio, image, cpc-image-hovers
8. [CSS] Anime Effect: 鬼滅の刃
Author: Rplus (Rplus)
Links: Source Code / Demo
Created on: September 24, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: anime, image-effect, mix-blend-mode
9. Sliced Image
Author: Jackie Keiser (MongooseDoom)
Links: Source Code / Demo
Created on: September 3, 2019
Made with: HTML, SCSS
10. Photo Modal (CSS Only)
Asset for upcoming "Uncomfortable Development" talk at CodePen Houston ( July 17 @ 6:30pm ) , adapted from uncomfortable.ellcreative.com https://nvite.com/CodePenHouston/w8eolg
Author: Shaw (shshaw)
Links: Source Code / Demo, Nvite.com
Created on: July 17, 2018
Made with: HTML, SCSS, JS
Tags: css, modal, photo, slice, splitting
11. Kitties! (hover Images)
Watch me code this in 10 minutes (you can speed it up if I'm too slow) . No Edge support for pentagons and hover effect (because of clip-path... still looks decent though). If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 31, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, jade, sass, flexbox, clip-path
12. Image Hover Effect
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
Created on: March 7, 2019
Made with: HTML, SCSS
Tags: css, hover, animation, hover-effect, effect
13. Glitch Effect On Hover
Learn how to create the glitch effect with CSS clip-path without JS.
Author: Ryan Yu (iamryanyu)
Links: Source Code / Demo
Created on: March 17, 2018
Made with: HTML, SCSS
Tags: ryan yu, glitch effect, css-animation, clip-path, frontend30
14. Perspective Tilty Images
Just an experiment to get more familiar with transform: matrix3d() in CSS! Feedback welcome, as usual -- I'd love to hear how I can improve this!
Author: Henry Desroches (xdesro)
Links: Source Code / Demo
Created on: September 28, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, perspective, matrix3d
15. Image With Reflection And Proximity Effect On Hover
Author: Tiago Alexandre Lopes (TiagoLopes)
Links: Source Code / Demo
Created on: June 2, 2017
Made with: HTML, CSS
16. CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
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
17. Hover Effect Blur
Author: Hervé (herve)
Links: Source Code / Demo
Created on: October 24, 2014
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: blur, hover-effect, header, cssonly
18. Image Revealing From Text On Hover
SVG clip path made of text reveals image on hover.
Author: web-tiki (web-tiki)
Links: Source Code / Demo
Created on: December 5, 2015
Made with: HTML, CSS
Tags: svg, hover, image-reveal, hover-effect, transition
19. Image Hover Animation
Author: Irem Lopsum (iremlopsum)
Links: Source Code / Demo
Created on: October 23, 2015
Made with: HTML, SCSS
20. Image Hover Effect
And a new image appear...
Author: Hervé (herve)
Links: Source Code / Demo
Created on: October 27, 2014
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-only, hover, image-effect, background, no-js
21. Pure CSS Thumbnail Hover Effect
This was inspired by an old blog post of Sohtanaka. He had created a similar effect using jQuery. I decided to replicate the same effect with CSS3. My final result is slightly different compared to his but it is still the same effect. Link to the original tutorial and demo is included in t...Read More
Author: Aysha Anggraini (rrenula)
Links: Source Code / Demo
Created on: November 21, 2013
Made with: HTML, CSS
Tags: hover-effect, css3, thumbnail
3D Images
1. Flexible Multi-panel Background
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: October 17, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, clip-path, 3d, jade
2. One Background For Multiple Divs
Author: Ivan Bogachev (sfi0zy)
Links: Source Code / Demo
Created on: October 16, 2019
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: Babel
HTML Pre-processor: Pug
3. 3D Image Hover CSS
Author: Shounak Ghosh (shounak-ghosh)
Links: Source Code / Demo
Created on: September 29, 2018
Made with: HTML, CSS
4. 3D Perspective Mouse Hover Image
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 29, 2018
Made with: HTML, CSS
5. 3D Effect On Hover - CSS Only
3D hover effect - CSS only
Author: Vincent Durand (onediv)
Links: Source Code / Demo
Created on: February 2, 2017
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: nojs, css3, css-only, pure-css
6. Panoramic (Pure CSS)
Image may take a bit to load. 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. Tested and works in Firefox 29, Chrome 34.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 1, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: 3d, animation, transform, sass
7. 3D Thumb Image Hover Effect
3D CSS3 Hover Effect with Pseudo Element Shadow Effect
Author: MrPirrera (pirrera)
Links: Source Code / Demo
Created on: April 14, 2014
Made with: HTML, CSS, JS
Image Transition and Animation Effects
1. Animated CSS Image
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo
Created on: March 25, 2020
Made with: Slim, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
2. THREE Image Transition
Shader powered image transition
Author: Szenia Zadvornykh (zadvorsky)
Links: Source Code / Demo
Created on: May 4, 2016
Made with: HTML, CSS, JS
Tags: threejs, gsap, animation
3. Image Hover Effect - 4
Author: @mandycodestoo (mandycodestoo)
Links: Source Code / Demo
Created on: November 25, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
4. 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. Ok, back to the game...
Author: Lee Martin (leemartin)
Links: Source Code / Demo, Tutorial
Created on: November 3, 2018
Made with: HTML, CSS
Tags: red dead redemption 2, tintype, photo, reveal, transition
5. TheOtherHalf
Author: ycw (ycw)
Links: Source Code / Demo
Created on: September 23, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: img.fx
6. AndyWarhol..ish
Author: ycw (ycw)
Links: Source Code / Demo
Created on: September 22, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: img.fx
7. Honeycomb
clip-path hexagon
Author: ycw (ycw)
Links: Source Code / Demo
Created on: August 30, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gallery, note
8. Water Your Cat (no Edge Support)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: August 11, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: transform, checkbox-hack, css-variables, 3d
9. 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
10. 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
11. 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
12. Animated Image Clipping ✂️
Simple CSS animated image clipper, making various shapes using percentages.
Author: Porgeee (GeorgePorgee)
Links: Source Code / Demo
Created on: April 30, 2018
Made with: HTML, CSS
Tags: css, codenewbie, clipping, animation
13. Sliding Blinds Effects With The Hoff
Using CSS custom properties, we can get a pretty fun result.
Author: Christopher Kirk-Nielsen (chriskirknielsen)
Links: Source Code / Demo
Created on: February 2, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: neon, animation, photo, the hoff, sliding blinds
14. Image Transition On Scroll (GSAP)
Author: Yugam (pizza3)
Created on: June 29, 2017
Made with: HTML, SCSS, Babel
Tags: gsap, animation, slider, transition
15. 2.5D
Early work: Attempting to recreate a 2.5D effect using CSS.
Author: Matt Drew (highplainsdrifter)
Links: Source Code / Demo
Created on: January 13, 2014
Made with: HTML, CSS
Tags: parallax, 3d, photo, transition, filters
16. Zutto Zoom Images
Author: Nathan Taylor (nathantaylor)
Links: Source Code / Demo
Created on: December 25, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
17. Circular Image Transition
Circular image transition using CSS and TweenMax
Author: Steve Gardner (steveg3003)
Links: Source Code / Demo
Created on: June 11, 2016
Made with: HTML, SCSS, JS
Tags: tweenmax, css, transition
18. Angled Full-width Image Mask
Author: Eric Jinks (Jinksi)
Links: Source Code / Demo
Created on: April 11, 2015
Made with: HTML, SCSS, JS
Tags: mask, angle
19. CSS3 Images Transition Hover
CSS3 images transition hover. inspired by http://jobyj.in/adipoli/#demo, images from lorempixel.com. for full view: http://codepen.io/ImBobby/full/Gkidn
Author: Bobby (ImBobby)
Links: Source Code / Demo
Created on: September 21, 2012
Made with: HTML, CSS, JS
Tags: images, transition, hover, css3
Image Overlay Effects
1. Split Image On Hover
Author: YJ (John_Tsai)
Links: Source Code / Demo
Created on: January 2, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
2. Portfolio Items CSS3 Transitions Effects
Portfolio Items CSS3 transitions effects (pure CSS3)
Author: foxeisen (fox_hover)
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, SCSS
Tags: css3, css, hover-effects, portfolio effects
3. When Life Gives You Lemons
Hover animation could be used for links to categories or post types. Also deals with skewing container while keeping background image straight. Take a look!
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
4. Css Image Hover Effects
Author: YaroslavW (YaroslavW)
Links: Source Code / Demo
Created on: August 28, 2017
Made with: HTML, CSS
5. Colored Overlay Using "box-shadow"
Author: Preethi Sam (rpsthecoder)
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, CSS
6. Simple Pulsing Image Hover Effect
Author: Alex Raven (asraven)
Links: Source Code / Demo
Created on: January 31, 2016
Made with: HTML, CSS
7. Animated Covers
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: May 8, 2013
Made with: HTML, CSS, JS
8. #1482 - Image Hover
Image with title and caption on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: April 29, 2016
Made with: HTML, CSS, JS
9. #1401 - Image Hover
Image with title, caption & icon on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: February 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover
10. #1321 - Image Hover
Image hover effect with title & icon
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: January 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover
11. #1361 - Image Hover
Image and title with slide up caption on hover.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: January 29, 2016
Made with: HTML, CSS, JS
Tags: image-hover
12. #1295 - Image Hover
Image with double border effect on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 23, 2015
Made with: HTML, CSS, JS
Tags: image-hover
13. #1273 - Image Hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover
14. #1256 - Image Hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: December 7, 2015
Made with: HTML, CSS, JS
Tags: £d, image-hover
15. #1206 - Image Hover Effect With Caption
Image hover effect with title and caption on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover-effect, image-hover, image card, caption
16. #1190 - Image Hover Effect With Title & Caption
An image hover effect with title and animated caption on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 7, 2015
Made with: HTML, CSS, JS
Tags: image-hover, retro, css3
17. #1033 - Image Hover Effect With Icon And Split Caption
Image hover effect with rotating right icon to displaying a split caption
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 31, 2015
Made with: HTML, CSS, JS
Tags: image-hover, css3, icon
18. #1029 - Image Hover Effect With Caption & Icons
Image hover effect with caption and slide down icons
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 29, 2015
Made with: HTML, CSS, JS
Tags: image, hover, icons, css3, caption
19. #1023 - Image Hover Effect With Icon
Simple image hover effect with bottom left page curl displaying a single icon
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML, CSS, JS
Tags: image, hover, css3, icon
20. #1019 - Image Hover Effect With Caption
Image hover effect with expanding vertical line to produce title and description text
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text
21. #0016 - Image Hover Effect With Caption
Image hover effect. Sliding line to the left to display title and description.
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text, lines
22. CSS HOVER INFORMATION
Author: Wifeo (wifeo)
Links: Source Code / Demo
Created on: August 27, 2014
Made with: HTML, CSS, JS
Tags: css, hover, animation, scale, navigation
23. Text Reveal On Hover: Flip Down
Trying to come up with new hover effects that I haven't seen on the web yet.
Author: David Leininger (davidleininger)
Links: Source Code / Demo
Created on: June 24, 2013
Made with: HTML, SCSS
Tags: css, hover, transition, 3d
More Awesome Lists:
Share: