Css-Only Direction Aware Box

A CSS-only implementation of a box with direction-aware hover. N, NE, E, SE, S, SW, W NW.

Made with: HTML,CSS

View Code

Directionally Aware Css Buttons With React

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

View Code

Css 3D Image Hover Effects

Pure CSS direction-aware card hover effects.

Made with: HTML,CSS

View Code

Css-Only Direction-Aware Hover Effect

CSS-only direction-aware hover effect is actually less tricky than you might think.

Made with: HTML,CSS (SCSS)

View Code

Css-Only Direction-Aware Hover Effect

A direction-aware hover effect that, guess what - works with pure CSS for full-page navigation :) Also uses clip-path and blend modes.

Made with: HTML,CSS

View Code

Effect Card Direction Aware

Made with: HTML,CSS

View Code

Pure Css Select Box With Direction Aware Hover Effect

Pure CSS select box without any JavaScript. When there is hover on an option the motion of icon inside option is decided by the direction of hover i.e up hover or down hover (direction aware hover effect).

Made with: HTML,CSS

View Code

Direction Aware Tiles

Direction aware tiles using clip-path pure CSS.

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

View Code

Css-Only Direction-Aware Cube Links

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

View Code

Proof-Of-Concept: Css Only Direction Aware Hover Blocks

Made with: HTML,CSS

View Code

Direction Aware Hover Pure Css

Just a little experiment with pseudo elements. Semantic HTML is maintained. No boilerplate elements.

Made with: HTML,CSS (SCSS)

View Code