# ianlunn/hover architecture

> Architecture diagram of the GitHub repository ianlunn/hover, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ianlunn/hover
- Repository: https://github.com/ianlunn/hover

## Overview

Hover.css is a browser-facing library of CSS3 hover effects, not an application service. A web author selects an effect, includes the stylesheet or copies the effect into their own CSS, and applies its prefixed class to an element; browsers then render the interaction. The repository provides CSS, Sass, and LESS forms, plus effect families and authoring utilities. The README documents the usage and capabilities; source excerpts do not show runtime module calls, so edges are limited to documented relationships.

Main entry points: [`css/hover.css`](https://github.com/ianlunn/hover/blob/master/css/hover.css) (Full stylesheet), [`css/hover-min.css`](https://github.com/ianlunn/hover/blob/master/css/hover-min.css) (Minified stylesheet), [`scss/hover.scss`](https://github.com/ianlunn/hover/blob/master/scss/hover.scss) (Sass entry), [`scss/_hacks.scss`](https://github.com/ianlunn/hover/blob/master/scss/_hacks.scss) (Sass display hacks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_usage["Authoring and use"]
  node_element["Styled element"]
end

subgraph group_css["CSS distribution"]
  node_css_full["Full stylesheet<br/>[hover.css]"]
  node_css_min["Minified stylesheet<br/>[hover-min.css]"]
  node_css_demo["Demo styles<br/>[demo-page.css]"]
end

subgraph group_sass["Sass source"]
  node_sass_entry["Sass entry<br/>[hover.scss]"]
  node_sass_utils["Sass utilities<br/>[_mixins.scss]"]
  node_sass_options["Sass options<br/>[_options.scss]"]
  node_sass_hacks["Sass display hacks<br/>[_hacks.scss]"]
  node_sass_2d["2D transitions"]
  node_sass_background["Background transitions"]
  node_sass_border["Border transitions"]
  node_sass_curls["Curls"]
  node_sass_icons["Icon effects"]
  node_sass_shadow["Shadow and glow"]
  node_sass_speech["Speech bubbles"]
end

subgraph group_less["LESS source"]
  node_less_entry["LESS entry<br/>[hover.less]"]
  node_less_utils["LESS utilities<br/>[_mixins.less]"]
  node_less_options["LESS options<br/>[_options.less]"]
  node_less_hacks["LESS display hacks<br/>[_hacks.less]"]
  node_less_effects["LESS effect catalog"]
end

node_author(("Web author"))
node_browser(("Browser"))

node_author -->|"references stylesheet"| node_css_full
node_author -->|"references stylesheet"| node_css_min
node_author -->|"adds effect class"| node_element
node_css_full -->|"styles elements"| node_browser
node_css_min -->|"styles elements"| node_browser
node_author -->|"chooses Sass source"| node_sass_entry
node_author -->|"chooses LESS source"| node_less_entry
node_author -->|"customizes display behavior"| node_sass_hacks
node_author -->|"customizes display behavior"| node_less_hacks

click node_css_full "https://github.com/ianlunn/hover/blob/master/css/hover.css"
click node_css_min "https://github.com/ianlunn/hover/blob/master/css/hover-min.css"
click node_css_demo "https://github.com/ianlunn/hover/blob/master/css/demo-page.css"
click node_sass_entry "https://github.com/ianlunn/hover/blob/master/scss/hover.scss"
click node_sass_utils "https://github.com/ianlunn/hover/blob/master/scss/_mixins.scss"
click node_sass_options "https://github.com/ianlunn/hover/blob/master/scss/_options.scss"
click node_sass_hacks "https://github.com/ianlunn/hover/blob/master/scss/_hacks.scss"
click node_sass_2d "https://github.com/ianlunn/hover/tree/master/scss/effects/2d-transitions"
click node_sass_background "https://github.com/ianlunn/hover/tree/master/scss/effects/background-transitions"
click node_sass_border "https://github.com/ianlunn/hover/tree/master/scss/effects/border-transitions"
click node_sass_curls "https://github.com/ianlunn/hover/tree/master/scss/effects/curls"
click node_sass_icons "https://github.com/ianlunn/hover/tree/master/scss/effects/icons"
click node_sass_shadow "https://github.com/ianlunn/hover/tree/master/scss/effects/shadow-and-glow-transitions"
click node_sass_speech "https://github.com/ianlunn/hover/tree/master/scss/effects/speech-bubbles"
click node_less_entry "https://github.com/ianlunn/hover/blob/master/less/hover.less"
click node_less_utils "https://github.com/ianlunn/hover/blob/master/less/_mixins.less"
click node_less_options "https://github.com/ianlunn/hover/blob/master/less/_options.less"
click node_less_hacks "https://github.com/ianlunn/hover/blob/master/less/_hacks.less"
click node_less_effects "https://github.com/ianlunn/hover/tree/master/less/effects"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_element,node_browser toneBlue
class node_css_full,node_css_min,node_css_demo toneAmber
class node_sass_entry,node_sass_utils,node_sass_options,node_sass_hacks,node_sass_2d,node_sass_background,node_sass_border,node_sass_curls,node_sass_icons,node_sass_shadow,node_sass_speech toneMint
class node_less_entry,node_less_utils,node_less_options,node_less_hacks,node_less_effects toneRose
class node_author toneIndigo
```

## Components

### Authoring and use

- **Styled element**

### CSS distribution

- [Full stylesheet](https://github.com/ianlunn/hover/blob/master/css/hover.css): `css/hover.css`
- [Minified stylesheet](https://github.com/ianlunn/hover/blob/master/css/hover-min.css): `css/hover-min.css`
- [Demo styles](https://github.com/ianlunn/hover/blob/master/css/demo-page.css): `css/demo-page.css`

### Sass source

- [Sass entry](https://github.com/ianlunn/hover/blob/master/scss/hover.scss): `scss/hover.scss`
- [Sass utilities](https://github.com/ianlunn/hover/blob/master/scss/_mixins.scss): `scss/_mixins.scss`
- [Sass options](https://github.com/ianlunn/hover/blob/master/scss/_options.scss): `scss/_options.scss`
- [Sass display hacks](https://github.com/ianlunn/hover/blob/master/scss/_hacks.scss): `scss/_hacks.scss`
- [2D transitions](https://github.com/ianlunn/hover/tree/master/scss/effects/2d-transitions): `scss/effects/2d-transitions`
- [Background transitions](https://github.com/ianlunn/hover/tree/master/scss/effects/background-transitions): `scss/effects/background-transitions`
- [Border transitions](https://github.com/ianlunn/hover/tree/master/scss/effects/border-transitions): `scss/effects/border-transitions`
- [Curls](https://github.com/ianlunn/hover/tree/master/scss/effects/curls): `scss/effects/curls`
- [Icon effects](https://github.com/ianlunn/hover/tree/master/scss/effects/icons): `scss/effects/icons`
- [Shadow and glow](https://github.com/ianlunn/hover/tree/master/scss/effects/shadow-and-glow-transitions): `scss/effects/shadow-and-glow-transitions`
- [Speech bubbles](https://github.com/ianlunn/hover/tree/master/scss/effects/speech-bubbles): `scss/effects/speech-bubbles`

### LESS source

- [LESS entry](https://github.com/ianlunn/hover/blob/master/less/hover.less): `less/hover.less`
- [LESS utilities](https://github.com/ianlunn/hover/blob/master/less/_mixins.less): `less/_mixins.less`
- [LESS options](https://github.com/ianlunn/hover/blob/master/less/_options.less): `less/_options.less`
- [LESS display hacks](https://github.com/ianlunn/hover/blob/master/less/_hacks.less): `less/_hacks.less`
- [LESS effect catalog](https://github.com/ianlunn/hover/tree/master/less/effects): `less/effects`

### Other components

- **Web author**
- **Browser**

## Connections

- Web author → Full stylesheet: references stylesheet (evidence: `README.md`)
- Web author → Minified stylesheet: references stylesheet (evidence: `README.md`)
- Web author → Styled element: adds effect class (evidence: `README.md`)
- Full stylesheet → Browser: styles elements (evidence: `README.md`)
- Minified stylesheet → Browser: styles elements (evidence: `README.md`)
- Web author → Sass entry: chooses Sass source (evidence: `README.md`)
- Web author → LESS entry: chooses LESS source (evidence: `README.md`)
- Web author → Sass display hacks: customizes display behavior (evidence: `README.md`)
- Web author → LESS display hacks: customizes display behavior (evidence: `README.md`)