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
![Css-Only Direction Aware Box](https://img.cssmix.net/img/2022/7/2568_css-only-direction-aware-box.webp)
![Directionally Aware Css Buttons With React](https://img.cssmix.net/img/2022/7/2569_directionally-aware-css-buttons-with-react.webp)
Css 3D Image Hover Effects
Pure CSS direction-aware card hover effects.
Made with: HTML,CSS
![Css 3D Image Hover Effects](https://img.cssmix.net/img/2022/9/2570_css-3d-image-hover-effects.webp)
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)
![Css-Only Direction-Aware Hover Effect](https://img.cssmix.net/img/2022/9/2571_css-only-direction-aware-hover-effect.webp)
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
![Css-Only Direction-Aware Hover Effect](https://img.cssmix.net/img/2022/9/2572_css-only-direction-aware-hover-effect.webp)
![Effect Card Direction Aware](https://img.cssmix.net/img/2022/9/2573_effect-card-direction-aware.webp)
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
![Pure Css Select Box With Direction Aware Hover Effect](https://img.cssmix.net/img/2022/9/2574_pure-css-select-box-with-direction-aware-hover-effect.webp)
Direction Aware Tiles
Direction aware tiles using clip-path pure CSS.
Made with: HTML (Haml),CSS (SCSS)
![Direction Aware Tiles](https://img.cssmix.net/img/2022/9/2575_direction-aware-tiles.webp)
![Css-Only Direction-Aware Cube Links](https://img.cssmix.net/img/2022/9/2576_css-only-direction-aware-cube-links.webp)
![Proof-Of-Concept: Css Only Direction Aware Hover Blocks](https://img.cssmix.net/img/2022/9/2577_proof-of-concept-css-only-direction-aware-hover-blocks.webp)
Direction Aware Hover Pure Css
Just a little experiment with pseudo elements. Semantic HTML is maintained. No boilerplate elements.
Made with: HTML,CSS (SCSS)
![Direction Aware Hover Pure Css](https://img.cssmix.net/img/2022/9/2578_direction-aware-hover-pure-css.webp)