Image Selector With Reflection

1.11.2019

Using a radio buttons to select an image with some styling.

Made with: HTML,CSS

View Code

Image Selector With Reflection

Flexible Multi-Panel Background

17.10.2019

Made with: HTML (Pug),CSS (SCSS)

View Code

Flexible Multi-Panel Background

One Background For Multiple Divs

16.10.2019

Made with: HTML (Pug),CSS (Less)

View Code

One Background For Multiple Divs

Css Anime Effect

24.09.2019

CSS anime hover effect with mix-blend-mode.

Made with: HTML (Pug),CSS (SCSS)

View Code

Css Anime Effect

Sliced Image

3.09.2019

Made with: HTML,CSS (SCSS)

View Code

Sliced Image

Creating A Duotone With Css

6.05.2019

Made with: HTML,CSS

View Code

Creating A Duotone With Css

Luminance Edge

8.03.2019

Image with luminance edges in HTML, CSS and SVG.

Made with: HTML (Pug),CSS (Less)

View Code

Luminance Edge

Image Hover Effect

7.03.2019

Pure CSS image hover effect.

Made with: HTML,CSS (SCSS)

View Code

Image Hover Effect

Split Image On Hover

2.01.2019

Made with: HTML (Pug),CSS (Sass)

View Code

Split Image On Hover

Image Hover Effect

25.11.2018

Image hover effect with slice transition.

Made with: HTML (Pug),CSS (SCSS)

View Code

Image Hover Effect

Red Dead Redemption 2 Tintype Photo Reveal

3.11.2018

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.

Made with: HTML,CSS

View Code

Red Dead Redemption 2 Tintype Photo Reveal

Portfolio Items With Five Transition Effects

13.10.2018

Five transition effects for portfolo image items. Pure CSS.

Made with: HTML,CSS (SCSS)

View Code

Portfolio Items With Five Transition Effects

3D Image Hover Css

29.09.2018

Made with: HTML,CSS

View Code

3D Image Hover Css

The Other Half

23.09.2018

background-size & background-position are animatable.

Made with: HTML,CSS,JavaScript

View Code

The Other Half

Img.Fx

22.09.2018

Made with: HTML (Pug),CSS

View Code

Img.Fx

Honeycomb

30.08.2018

clip-path hexagon.

Made with: HTML (Pug),CSS

View Code

Honeycomb

Image Transition: Water Your Cat

11.08.2018

Compact and clean code. No Edge support due to CSS variable/ calc() bugs.

Made with: HTML (Pug),CSS (SCSS)

View Code

Image Transition: Water Your Cat

Css Only Photo Modal

17.07.2018

Made with: HTML,CSS (SCSS)

View Code

Css Only Photo Modal

Image Glitch Effect

18.06.2018

Made with: HTML (Pug),CSS (SCSS)

View Code

Image Glitch Effect

Image With Winding Effect

9.06.2018

clip-path:polygon(..) winding.

Made with: HTML (Pug),CSS

View Code

Image With Winding Effect