Collection of hand-picked free HTML and pure CSS direction-aware effect code examples from Codepen and other resources.

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS

About a code

CSS-Only Direction Aware Box

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Directionally Aware CSS Buttons with React

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: react.js, react-dom.js

Author

  • Oral

Links

Made with

  • HTML / CSS

About a code

CSS 3D Image Hover Effects

Pure CSS direction-aware card hover effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paulina Hetman

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS-Only Direction-Aware Hover Effect

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paulina Hetman

Links

Made with

  • HTML / CSS

About a 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Crianbluff

Links

Made with

  • HTML / CSS

About a code

Effect Card Direction Aware

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS

About a 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).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • JR Balbin

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Direction Aware Tiles

Direction aware tiles using clip-path pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Gabrielle Wee

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

CSS-Only Direction-Aware Cube Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Vesa Piittinen

Links

Made with

  • HTML / CSS

About a code

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Fabrice W.

Links

Made with

  • HTML / CSS (SCSS)

About a code

Direction Aware Hover Pure CSS

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -