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.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

1. Flexible Multi-panel Background

CSS Image Effects - Flexible multi-panel background
Author: Ana Tudor (thebabydino)
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

CSS Image Effects - One background for multiple divs
Author: Ivan Bogachev (sfi0zy)
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

CSS Image Effects - 3D image hover CSS
Author: Shounak Ghosh (shounak-ghosh)
Created on: September 29, 2018
Made with: HTML, CSS

4. 3D Perspective Mouse Hover Image

CSS Image Effects - 3D perspective mouse hover image
Author: Eriksen (eriksenlezama)
Created on: January 29, 2018
Made with: HTML, CSS

5. CSS Clip-Path Hover Effect

CSS Image Effects - CSS Clip-Path Hover Effect
Created for the Image Hovers CodePen Challenge.
Author: Ryan Mulligan (hexagoncircle)
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

CSS Image Effects - CPC · Image hover · 01
Author: Noah Delagardelle (NoahDelagardelle)
Created on: April 22, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge

7. Image Hover - CSS (filters & Transitions)

CSS Image Effects - 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)
Created on: April 20, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge, transition, hover, image

8. Glass Effect With CSS Masks

CSS Image Effects - Glass Effect with CSS Masks
Author: yoksel (yoksel)
Created on: March 17, 2020
Made with: HTML, SCSS

9. "Connection" - CSS Hover FX

CSS Image Effects - "Connection" - CSS Hover FX
Author: ycw (ycw)
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}

CSS Image Effects - piece{css hover fx}
Author: ycw (ycw)
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

CSS Image Effects - 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)
Created on: November 1, 2019
Made with: HTML, CSS
Tags: css, radio, image, cpc-image-hovers

12. [CSS] Anime Effect: 鬼滅の刃

CSS Image Effects - [CSS] anime effect: 鬼滅の刃
Author: Rplus (Rplus)
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

CSS Image Effects - Sliced Image
Author: Jackie Keiser (MongooseDoom)
Created on: September 3, 2019
Made with: HTML, SCSS

14. Photo Modal (CSS Only)

CSS Image Effects - 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)
Created on: July 17, 2018
Made with: HTML, SCSS, JS
Tags: css, modal, photo, slice, splitting

15. Kitties! (hover Images)

CSS Image Effects - 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)
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

CSS Image Effects - Image Hover Effect
Author: Mert Cukuren (knyttneve)
Created on: March 7, 2019
Made with: HTML, SCSS
Tags: css, hover, animation, hover-effect, effect

17. Glitch Effect On Hover

CSS Image Effects - Glitch Effect on Hover
Learn how to create the glitch effect with CSS clip-path without JS.
Author: Ryan Yu (iamryanyu)
Created on: March 17, 2018
Made with: HTML, SCSS
Tags: ryan yu, glitch effect, css-animation, clip-path, frontend30

18. Perspective Tilty Images

CSS Image Effects - 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)
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

CSS Image Effects - Image with reflection and proximity effect on hover
Author: Tiago Alexandre Lopes (TiagoLopes)
Created on: June 2, 2017
Made with: HTML, CSS

20. CSS Gradient Hover Effect

CSS Image Effects - CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
Author: Jon Daiello (jondaiello)
Created on: August 29, 2016
Made with: HTML, SCSS
Tags: css-gradient, mix-blend-mode, gradient hover effect

21. Zoom IMage With Scale

CSS Image Effects - Zoom iMage with scale
Omar Dsoky Zoom iMage with scale
Author: Omar Dsooky (linux)
Created on: August 6, 2017
Made with: HTML, CSS
Tags: zoom, image, scale, transform, odsoky

22. Image Cropped And Hover Zoom Effect

CSS Image Effects - 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)
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

CSS Image Effects - Split Image on hover
Author: YJ (John_Tsai)
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

CSS Image Effects - Portfolio Items CSS3 transitions effects
Portfolio Items CSS3 transitions effects (pure CSS3)
Author: foxeisen (fox_hover)
Created on: October 13, 2018
Made with: HTML, SCSS
Tags: css3, css, hover-effects, portfolio effects

25. When Life Gives You Lemons

CSS Image Effects - 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)
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

CSS Image Effects - Css Image Hover Effects
Author: YaroslavW (YaroslavW)
Created on: August 28, 2017
Made with: HTML, CSS

27. Colored Overlay Using "box-shadow"

CSS Image Effects - Colored Overlay Using "box-shadow"
Author: Preethi Sam (rpsthecoder)
Created on: July 12, 2016
Made with: HTML, CSS

28. Simple Pulsing Image Hover Effect

CSS Image Effects - Simple Pulsing Image Hover Effect
Author: Alex Raven (asraven)
Created on: January 31, 2016
Made with: HTML, CSS

29. Animated Covers

CSS Image Effects - Animated Covers
Author: Mojtaba Seyedi (seyedi)
Created on: May 8, 2013
Made with: HTML, CSS, JS

30. Colorful Shadows

CSS Image Effects - Colorful shadows
Author: Mojtaba Seyedi (seyedi)
Created on: March 15, 2020
Made with: HTML, CSS, JS
Tags: shadow, image, filter

31. Animated CSS Image

CSS Image Effects - Animated CSS Image
Author: Bennett Feely (bennettfeely)
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

CSS Image Effects - THREE Image Transition
Shader powered image transition
Author: Szenia Zadvornykh (zadvorsky)
Created on: May 4, 2016
Made with: HTML, CSS, JS
Tags: threejs, gsap, animation

33. Image Hover Effect - 4

CSS Image Effects - Image Hover Effect - 4
Author: @mandycodestoo (mandycodestoo)
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

CSS Image Effects - 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)
Created on: November 3, 2018
Made with: HTML, CSS
Tags: red dead redemption 2, tintype, photo, reveal, transition

35. TheOtherHalf

CSS Image Effects - TheOtherHalf
Author: ycw (ycw)
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

CSS Image Effects - AndyWarhol..ish
Author: ycw (ycw)
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

CSS Image Effects - Honeycomb
clip-path hexagon
Author: ycw (ycw)
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)

CSS Image Effects - Water Your Cat (no Edge Support)
Author: Ana Tudor (thebabydino)
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

CSS Image Effects - Image glitch effect
Author: Alain (AlainBarrios)
Created on: June 18, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

40. Winding

CSS Image Effects - Winding
Author: ycw (ycw)
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

CSS Image Effects - Spread
Author: ycw (ycw)
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 ✂️

CSS Image Effects - Animated Image Clipping ✂️
Simple CSS animated image clipper, making various shapes using percentages.
Author: Porgeee (GeorgePorgee)
Created on: April 30, 2018
Made with: HTML, CSS
Tags: css, codenewbie, clipping, animation

43. Sliding Blinds Effects With The Hoff

CSS Image Effects - Sliding blinds effects with The Hoff
Using CSS custom properties, we can get a pretty fun result.
Author: Christopher Kirk-Nielsen (chriskirknielsen)
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

45. 2.5D

CSS Image Effects - 2.5D
Early work: Attempting to recreate a 2.5D effect using CSS.
Author: Matt Drew (highplainsdrifter)
Created on: January 13, 2014
Made with: HTML, CSS
Tags: parallax, 3d, photo, transition, filters

46. Image With Backdrop Effect

CSS Image Effects - Image with backdrop effect
Author: Bansal (bansal-io)
Created on: April 25, 2020
Made with: HTML
Tags: css, image, filter, gallery, slide

48. Luminance Edge

CSS Image Effects - Luminance Edge
Author: ycw (ycw)
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

CSS Image Effects - 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)
Created on: March 11, 2018
Made with: HTML, SCSS
Tags: image, effect, portrait

50. 3D Effect On Hover - CSS Only

CSS Image Effects - 3D effect on hover - CSS only
3D hover effect - CSS only
Author: Vincent Durand (onediv)
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)

CSS Image Effects - 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)
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

CSS Image Effects - 3D Thumb Image Hover Effect
3D CSS3 Hover Effect with Pseudo Element Shadow Effect
Author: MrPirrera (pirrera)
Created on: April 14, 2014
Made with: HTML, CSS, JS

53. Hover Effect Blur

CSS Image Effects - Hover effect blur
Author: Hervé (herve)
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

CSS Image Effects - Image revealing from text on hover
SVG clip path made of text reveals image on hover.
Author: web-tiki (web-tiki)
Created on: December 5, 2015
Made with: HTML, CSS
Tags: svg, hover, image-reveal, hover-effect, transition

55. Image Hover Animation

CSS Image Effects - Image hover animation
Author: Irem Lopsum (iremlopsum)
Created on: October 23, 2015
Made with: HTML, SCSS

56. Image Hover Effect

CSS Image Effects - Image hover effect
And a new image appear...
Author: Hervé (herve)
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

CSS Image Effects - 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)
Created on: November 21, 2013
Made with: HTML, CSS
Tags: hover-effect, css3, thumbnail

58. No-JS On-Hover Image Zoom

CSS Image Effects - 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)
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

CSS Image Effects - Romantic Zoom Effect
A pure CSS zoom effect.
Author: Adrien Bachmann (AdrienBachmann)
Created on: January 31, 2016
Made with: HTML, SCSS, JS
Tags: css, zoom, animation, 3d, parallax

60. #1482 - Image Hover

CSS Image Effects - #1482 - Image Hover
Image with title and caption on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: April 29, 2016
Made with: HTML, CSS, JS

61. #1401 - Image Hover

CSS Image Effects - #1401 - Image Hover
Image with title, caption & icon on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: February 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover

62. #1321 - Image Hover

CSS Image Effects - #1321 - Image Hover
Image hover effect with title & icon
Author: LittleSnippets.net (littlesnippets)
Created on: January 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover

63. #1361 - Image Hover

CSS Image Effects - #1361 - Image Hover
Image and title with slide up caption on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: January 29, 2016
Made with: HTML, CSS, JS
Tags: image-hover

64. #1295 - Image Hover

CSS Image Effects - #1295 - Image Hover
Image with double border effect on hover
Author: LittleSnippets.net (littlesnippets)
Created on: December 23, 2015
Made with: HTML, CSS, JS
Tags: image-hover

65. #1273 - Image Hover

CSS Image Effects - #1273 - Image hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Created on: December 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover

66. #1256 - Image Hover

CSS Image Effects - #1256 - Image hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Created on: December 7, 2015
Made with: HTML, CSS, JS
Tags: £d, image-hover

67. #1206 - Image Hover Effect With Caption

CSS Image Effects - #1206 - Image hover effect with caption
Image hover effect with title and caption on hover
Author: LittleSnippets.net (littlesnippets)
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

CSS Image Effects - #1190 - Image hover effect with title & caption
An image hover effect with title and animated caption on hover
Author: LittleSnippets.net (littlesnippets)
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

CSS Image Effects - #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)
Created on: August 31, 2015
Made with: HTML, CSS, JS
Tags: image-hover, css3, icon

70. #1029 - Image Hover Effect With Caption & Icons

CSS Image Effects - #1029 - Image hover effect with caption & icons
Image hover effect with caption and slide down icons
Author: LittleSnippets.net (littlesnippets)
Created on: August 29, 2015
Made with: HTML, CSS, JS
Tags: image, hover, icons, css3, caption

71. #1023 - Image Hover Effect With Icon

CSS Image Effects - #1023 - Image hover effect with icon
Simple image hover effect with bottom left page curl displaying a single icon
Author: LittleSnippets.net (littlesnippets)
Created on: August 28, 2015
Made with: HTML, CSS, JS
Tags: image, hover, css3, icon

72. #1019 - Image Hover Effect With Caption

CSS Image Effects - #1019 - Image hover effect with caption
Image hover effect with expanding vertical line to produce title and description text
Author: LittleSnippets.net (littlesnippets)
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text

73. #0016 - Image Hover Effect With Caption

CSS Image Effects - #0016 - Image hover effect with caption
Image hover effect. Sliding line to the left to display title and description.
Author: LittleSnippets.net (littlesnippets)
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text, lines

74. CSS HOVER INFORMATION

CSS Image Effects - CSS HOVER INFORMATION
Author: Wifeo (wifeo)
Created on: August 27, 2014
Made with: HTML, CSS, JS
Tags: css, hover, animation, scale, navigation

75. Text Reveal On Hover: Flip Down

CSS Image Effects - 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)
Created on: June 24, 2013
Made with: HTML, SCSS
Tags: css, hover, transition, 3d

76. IOS Shadow Effect With React

CSS Image Effects - iOS shadow effect with React
iOS style translucent image shadow effect as React component
Author: martin banks (martin-banks)
Created on: December 2, 2016
Made with: HTML, CSS, Babel

77. Zutto Zoom Images

CSS Image Effects - Zutto Zoom Images
Author: Nathan Taylor (nathantaylor)
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

CSS Image Effects - Circular Image Transition
Circular image transition using CSS and TweenMax
Author: Steve Gardner (steveg3003)
Created on: June 11, 2016
Made with: HTML, SCSS, JS
Tags: tweenmax, css, transition

79. Angled Full-width Image Mask

CSS Image Effects - Angled full-width image mask
Author: Eric Jinks (Jinksi)
Created on: April 11, 2015
Made with: HTML, SCSS, JS
Tags: mask, angle

80. CSS3 Images Transition Hover

CSS Image Effects - 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)
Created on: September 21, 2012
Made with: HTML, CSS, JS
Tags: images, transition, hover, css3

81. Polaroid Images [HTML/CSS]

CSS Image Effects - Polaroid images [HTML/CSS]
Author: Jack Cranston (jackcranston)
Created on: October 5, 2017
Made with: HTML, CSS

82. CSS Nugget: Styling Siblings On Hover

CSS Image Effects - CSS Nugget: Styling siblings on hover
More info: https://codyhouse.co/nuggets/styling-siblings-on-hover
Author: CodyHouse (codyhouse)
Created on: May 18, 2020
Made with: HTML, SCSS

83. Clip Blinds

CSS Image Effects - Clip blinds
Author: Subin (meemaw1)
Created on: September 28, 2018
Made with: HTML, CSS
Tags: clip, css, image, background, glass

84. HBD Michael 13allack 😄 - Poster

CSS Image Effects - 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)
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

CSS Image Effects - 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)
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

CSS Image Effects - Parallax Flipping Cards
Author: Nicolas Pavlotsky (nicolaspavlotsky)
Created on: July 31, 2017
Made with: HTML, CSS

87. Looking Through Dirty Glass

CSS Image Effects - Looking through Dirty Glass
Inspired by the opening credits of The Walking Dead.
Author: Chris Smith (chris22smith)
Created on: May 23, 2017
Made with: HTML, CSS
Tags: the-walking-dead, animation, dirty glass

88. Ken Burns Effect CSS Only

CSS Image Effects - Ken Burns effect CSS only
Ken Burns effect CSS only
Author: Dima (dimaZubkov)
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

CSS Image Effects - Scrolling Half By Half Pure
A Split screen gallery
Author: Kseso (Kseso)
Created on: August 6, 2017
Made with: HTML, CSS
Tags: gallery, pure-css, scroll, impocssible

90. Ken Burns Effect - Pure Css

CSS Image Effects - Ken Burns effect - pure css
Full width image with pure css Ken Burns effect
Author: Saijo George (SaijoGeorge)
Created on: January 29, 2017
Made with: HTML, CSS
Tags: kens burns, pure-css
NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

Image Magnify/Zoom Effects

1. Zoom IMage With Scale

CSS Image Effects - Zoom iMage with scale
Omar Dsoky Zoom iMage with scale
Author: Omar Dsooky (linux)
Created on: August 6, 2017
Made with: HTML, CSS
Tags: zoom, image, scale, transform, odsoky

2. Image Cropped And Hover Zoom Effect

CSS Image Effects - 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)
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

CSS Image Effects - 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)
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

CSS Image Effects - Romantic Zoom Effect
A pure CSS zoom effect.
Author: Adrien Bachmann (AdrienBachmann)
Created on: January 31, 2016
Made with: HTML, SCSS, JS
Tags: css, zoom, animation, 3d, parallax

Image Shadow Effects

1. Colorful Shadows

CSS Image Effects - Colorful shadows
Author: Mojtaba Seyedi (seyedi)
Created on: March 15, 2020
Made with: HTML, CSS, JS
Tags: shadow, image, filter

2. IOS Shadow Effect With React

CSS Image Effects - iOS shadow effect with React
iOS style translucent image shadow effect as React component
Author: martin banks (martin-banks)
Created on: December 2, 2016
Made with: HTML, CSS, Babel

Simple Image Effects

1. Image With Backdrop Effect

CSS Image Effects - Image with backdrop effect
Author: Bansal (bansal-io)
Created on: April 25, 2020
Made with: HTML
Tags: css, image, filter, gallery, slide

3. Luminance Edge

CSS Image Effects - Luminance Edge
Author: ycw (ycw)
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

CSS Image Effects - 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)
Created on: March 11, 2018
Made with: HTML, SCSS
Tags: image, effect, portrait

Image Hover Effects

1. CSS Clip-Path Hover Effect

CSS Image Effects - CSS Clip-Path Hover Effect
Created for the Image Hovers CodePen Challenge.
Author: Ryan Mulligan (hexagoncircle)
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

CSS Image Effects - CPC · Image hover · 01
Author: Noah Delagardelle (NoahDelagardelle)
Created on: April 22, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge

3. Image Hover - CSS (filters & Transitions)

CSS Image Effects - 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)
Created on: April 20, 2020
Made with: HTML, SCSS
Tags: cpc-image-hovers, codepenchallenge, transition, hover, image

4. Glass Effect With CSS Masks

CSS Image Effects - Glass Effect with CSS Masks
Author: yoksel (yoksel)
Created on: March 17, 2020
Made with: HTML, SCSS

5. "Connection" - CSS Hover FX

CSS Image Effects - "Connection" - CSS Hover FX
Author: ycw (ycw)
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}

CSS Image Effects - piece{css hover fx}
Author: ycw (ycw)
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

CSS Image Effects - 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)
Created on: November 1, 2019
Made with: HTML, CSS
Tags: css, radio, image, cpc-image-hovers

8. [CSS] Anime Effect: 鬼滅の刃

CSS Image Effects - [CSS] anime effect: 鬼滅の刃
Author: Rplus (Rplus)
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

CSS Image Effects - Sliced Image
Author: Jackie Keiser (MongooseDoom)
Created on: September 3, 2019
Made with: HTML, SCSS

10. Photo Modal (CSS Only)

CSS Image Effects - 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)
Created on: July 17, 2018
Made with: HTML, SCSS, JS
Tags: css, modal, photo, slice, splitting

11. Kitties! (hover Images)

CSS Image Effects - 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)
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

CSS Image Effects - Image Hover Effect
Author: Mert Cukuren (knyttneve)
Created on: March 7, 2019
Made with: HTML, SCSS
Tags: css, hover, animation, hover-effect, effect

13. Glitch Effect On Hover

CSS Image Effects - Glitch Effect on Hover
Learn how to create the glitch effect with CSS clip-path without JS.
Author: Ryan Yu (iamryanyu)
Created on: March 17, 2018
Made with: HTML, SCSS
Tags: ryan yu, glitch effect, css-animation, clip-path, frontend30

14. Perspective Tilty Images

CSS Image Effects - 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)
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

CSS Image Effects - Image with reflection and proximity effect on hover
Author: Tiago Alexandre Lopes (TiagoLopes)
Created on: June 2, 2017
Made with: HTML, CSS

16. CSS Gradient Hover Effect

CSS Image Effects - CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
Author: Jon Daiello (jondaiello)
Created on: August 29, 2016
Made with: HTML, SCSS
Tags: css-gradient, mix-blend-mode, gradient hover effect

17. Hover Effect Blur

CSS Image Effects - Hover effect blur
Author: Hervé (herve)
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

CSS Image Effects - Image revealing from text on hover
SVG clip path made of text reveals image on hover.
Author: web-tiki (web-tiki)
Created on: December 5, 2015
Made with: HTML, CSS
Tags: svg, hover, image-reveal, hover-effect, transition

19. Image Hover Animation

CSS Image Effects - Image hover animation
Author: Irem Lopsum (iremlopsum)
Created on: October 23, 2015
Made with: HTML, SCSS

20. Image Hover Effect

CSS Image Effects - Image hover effect
And a new image appear...
Author: Hervé (herve)
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

CSS Image Effects - 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)
Created on: November 21, 2013
Made with: HTML, CSS
Tags: hover-effect, css3, thumbnail

3D Images

1. Flexible Multi-panel Background

CSS Image Effects - Flexible multi-panel background
Author: Ana Tudor (thebabydino)
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

CSS Image Effects - One background for multiple divs
Author: Ivan Bogachev (sfi0zy)
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

CSS Image Effects - 3D image hover CSS
Author: Shounak Ghosh (shounak-ghosh)
Created on: September 29, 2018
Made with: HTML, CSS

4. 3D Perspective Mouse Hover Image

CSS Image Effects - 3D perspective mouse hover image
Author: Eriksen (eriksenlezama)
Created on: January 29, 2018
Made with: HTML, CSS

5. 3D Effect On Hover - CSS Only

CSS Image Effects - 3D effect on hover - CSS only
3D hover effect - CSS only
Author: Vincent Durand (onediv)
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)

CSS Image Effects - 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)
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

CSS Image Effects - 3D Thumb Image Hover Effect
3D CSS3 Hover Effect with Pseudo Element Shadow Effect
Author: MrPirrera (pirrera)
Created on: April 14, 2014
Made with: HTML, CSS, JS

Image Transition and Animation Effects

1. Animated CSS Image

CSS Image Effects - Animated CSS Image
Author: Bennett Feely (bennettfeely)
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

CSS Image Effects - THREE Image Transition
Shader powered image transition
Author: Szenia Zadvornykh (zadvorsky)
Created on: May 4, 2016
Made with: HTML, CSS, JS
Tags: threejs, gsap, animation

3. Image Hover Effect - 4

CSS Image Effects - Image Hover Effect - 4
Author: @mandycodestoo (mandycodestoo)
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

CSS Image Effects - 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)
Created on: November 3, 2018
Made with: HTML, CSS
Tags: red dead redemption 2, tintype, photo, reveal, transition

5. TheOtherHalf

CSS Image Effects - TheOtherHalf
Author: ycw (ycw)
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

CSS Image Effects - AndyWarhol..ish
Author: ycw (ycw)
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

CSS Image Effects - Honeycomb
clip-path hexagon
Author: ycw (ycw)
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)

CSS Image Effects - Water Your Cat (no Edge Support)
Author: Ana Tudor (thebabydino)
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

CSS Image Effects - Image glitch effect
Author: Alain (AlainBarrios)
Created on: June 18, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

10. Winding

CSS Image Effects - Winding
Author: ycw (ycw)
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

CSS Image Effects - Spread
Author: ycw (ycw)
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 ✂️

CSS Image Effects - Animated Image Clipping ✂️
Simple CSS animated image clipper, making various shapes using percentages.
Author: Porgeee (GeorgePorgee)
Created on: April 30, 2018
Made with: HTML, CSS
Tags: css, codenewbie, clipping, animation

13. Sliding Blinds Effects With The Hoff

CSS Image Effects - Sliding blinds effects with The Hoff
Using CSS custom properties, we can get a pretty fun result.
Author: Christopher Kirk-Nielsen (chriskirknielsen)
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

15. 2.5D

CSS Image Effects - 2.5D
Early work: Attempting to recreate a 2.5D effect using CSS.
Author: Matt Drew (highplainsdrifter)
Created on: January 13, 2014
Made with: HTML, CSS
Tags: parallax, 3d, photo, transition, filters

16. Zutto Zoom Images

CSS Image Effects - Zutto Zoom Images
Author: Nathan Taylor (nathantaylor)
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

CSS Image Effects - Circular Image Transition
Circular image transition using CSS and TweenMax
Author: Steve Gardner (steveg3003)
Created on: June 11, 2016
Made with: HTML, SCSS, JS
Tags: tweenmax, css, transition

18. Angled Full-width Image Mask

CSS Image Effects - Angled full-width image mask
Author: Eric Jinks (Jinksi)
Created on: April 11, 2015
Made with: HTML, SCSS, JS
Tags: mask, angle

19. CSS3 Images Transition Hover

CSS Image Effects - 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)
Created on: September 21, 2012
Made with: HTML, CSS, JS
Tags: images, transition, hover, css3

Image Overlay Effects

1. Split Image On Hover

CSS Image Effects - Split Image on hover
Author: YJ (John_Tsai)
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

CSS Image Effects - Portfolio Items CSS3 transitions effects
Portfolio Items CSS3 transitions effects (pure CSS3)
Author: foxeisen (fox_hover)
Created on: October 13, 2018
Made with: HTML, SCSS
Tags: css3, css, hover-effects, portfolio effects

3. When Life Gives You Lemons

CSS Image Effects - 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)
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

CSS Image Effects - Css Image Hover Effects
Author: YaroslavW (YaroslavW)
Created on: August 28, 2017
Made with: HTML, CSS

5. Colored Overlay Using "box-shadow"

CSS Image Effects - Colored Overlay Using "box-shadow"
Author: Preethi Sam (rpsthecoder)
Created on: July 12, 2016
Made with: HTML, CSS

6. Simple Pulsing Image Hover Effect

CSS Image Effects - Simple Pulsing Image Hover Effect
Author: Alex Raven (asraven)
Created on: January 31, 2016
Made with: HTML, CSS

7. Animated Covers

CSS Image Effects - Animated Covers
Author: Mojtaba Seyedi (seyedi)
Created on: May 8, 2013
Made with: HTML, CSS, JS

8. #1482 - Image Hover

CSS Image Effects - #1482 - Image Hover
Image with title and caption on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: April 29, 2016
Made with: HTML, CSS, JS

9. #1401 - Image Hover

CSS Image Effects - #1401 - Image Hover
Image with title, caption & icon on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: February 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover

10. #1321 - Image Hover

CSS Image Effects - #1321 - Image Hover
Image hover effect with title & icon
Author: LittleSnippets.net (littlesnippets)
Created on: January 16, 2016
Made with: HTML, CSS, JS
Tags: image-hover

11. #1361 - Image Hover

CSS Image Effects - #1361 - Image Hover
Image and title with slide up caption on hover.
Author: LittleSnippets.net (littlesnippets)
Created on: January 29, 2016
Made with: HTML, CSS, JS
Tags: image-hover

12. #1295 - Image Hover

CSS Image Effects - #1295 - Image Hover
Image with double border effect on hover
Author: LittleSnippets.net (littlesnippets)
Created on: December 23, 2015
Made with: HTML, CSS, JS
Tags: image-hover

13. #1273 - Image Hover

CSS Image Effects - #1273 - Image hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Created on: December 14, 2015
Made with: HTML, CSS, JS
Tags: image-hover

14. #1256 - Image Hover

CSS Image Effects - #1256 - Image hover
Image hover with title and caption
Author: LittleSnippets.net (littlesnippets)
Created on: December 7, 2015
Made with: HTML, CSS, JS
Tags: £d, image-hover

15. #1206 - Image Hover Effect With Caption

CSS Image Effects - #1206 - Image hover effect with caption
Image hover effect with title and caption on hover
Author: LittleSnippets.net (littlesnippets)
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

CSS Image Effects - #1190 - Image hover effect with title & caption
An image hover effect with title and animated caption on hover
Author: LittleSnippets.net (littlesnippets)
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

CSS Image Effects - #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)
Created on: August 31, 2015
Made with: HTML, CSS, JS
Tags: image-hover, css3, icon

18. #1029 - Image Hover Effect With Caption & Icons

CSS Image Effects - #1029 - Image hover effect with caption & icons
Image hover effect with caption and slide down icons
Author: LittleSnippets.net (littlesnippets)
Created on: August 29, 2015
Made with: HTML, CSS, JS
Tags: image, hover, icons, css3, caption

19. #1023 - Image Hover Effect With Icon

CSS Image Effects - #1023 - Image hover effect with icon
Simple image hover effect with bottom left page curl displaying a single icon
Author: LittleSnippets.net (littlesnippets)
Created on: August 28, 2015
Made with: HTML, CSS, JS
Tags: image, hover, css3, icon

20. #1019 - Image Hover Effect With Caption

CSS Image Effects - #1019 - Image hover effect with caption
Image hover effect with expanding vertical line to produce title and description text
Author: LittleSnippets.net (littlesnippets)
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text

21. #0016 - Image Hover Effect With Caption

CSS Image Effects - #0016 - Image hover effect with caption
Image hover effect. Sliding line to the left to display title and description.
Author: LittleSnippets.net (littlesnippets)
Created on: August 27, 2015
Made with: HTML, CSS
Tags: image, hover, css3, text, lines

22. CSS HOVER INFORMATION

CSS Image Effects - CSS HOVER INFORMATION
Author: Wifeo (wifeo)
Created on: August 27, 2014
Made with: HTML, CSS, JS
Tags: css, hover, animation, scale, navigation

23. Text Reveal On Hover: Flip Down

CSS Image Effects - 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)
Created on: June 24, 2013
Made with: HTML, SCSS
Tags: css, hover, transition, 3d