➕ Add onhover-#{utility} classes

.vscode/spellright.dict

@@ -20,3 +20,4 @@ rgba
 clr
 ive
 fillout
+Onhover

src/fluid-utilities.scss

@@ -47,6 +47,7 @@
 @import "./objects/divider";
 @import "./objects/screenreaders";
 @import "./objects/scrollbar";
+@import "./objects/onhover";
 
 //
 // Utilities

src/fluid.scss

@@ -76,6 +76,7 @@
 @import "./objects/divider";
 @import "./objects/screenreaders";
 @import "./objects/scrollbar";
+@import "./objects/onhover";
 
 //
 // Components

src/objects/_onhover.scss

@@ -0,0 +1,161 @@
+//
+// Onhover Show
+//
+
+@if $generate-object-classes {
+  %onhover-fadein {
+    @include animation(fadein, .25s);
+  }
+  %onhover-grayscalein {
+    @include animation(grayscalein, .25s);
+  }
+  %onhover-blurin {
+    @include animation(blurin, .25s);
+  }
+  %onhover-zoomin {
+    @include animation(zoomin, .25s);
+  }
+  %onhover-zoomout {
+    @include animation(zoomout, .25s);
+  }
+  %onhover-elevate {
+    @include animation(elevate, .25s);
+  }
+
+  //
+  // Onhover fadein
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-fadein#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(fadeout, .25s);
+      }
+      @include hover {
+        @extend %onhover-fadein;
+      }
+    }
+  }
+
+  //
+  // Onhover grayscale
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-grayscale#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(grayscaleout, .25s);
+      }
+      @include hover {
+        @extend %onhover-grayscalein;
+      }
+    }
+  }
+
+  //
+  // Onhover blur
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-blur#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(blurout, .25s);
+      }
+      @include hover {
+        @extend %onhover-blurin;
+      }
+    }
+  }
+
+  //
+  // Onhover zoomin
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-zoomin#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(zoomin-reverse, .25s);
+      }
+      @include hover {
+        @extend %onhover-zoomin;
+      }
+    }
+  }
+
+  //
+  // Onhover zoomout
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-zoomout#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(zoomout-reverse, .25s);
+      }
+      @include hover {
+        @extend %onhover-zoomout;
+      }
+    }
+  }
+
+  .onhover-elevate {
+    @include transition(transform);
+
+    @include hover {
+      transform: translateY(-2rem);
+    }
+  }
+
+  //
+  // Onhover elevate
+  //
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-suffix: prefix(
+      name-breakpoint($breakpoint),
+      "\\"+ $breakpoints-above-prefix
+    );
+
+    .onhover-elevate#{$breakpoint-suffix} {
+      @include media-breakpoint-above($breakpoint) {
+        @include animation(elevate-reverse, .25s);
+      }
+      @include hover {
+        @extend %onhover-elevate;
+      }
+    }
+  }
+
+  //
+  // Onhover Parent
+  //
+  .onhover-parent {
+    position: relative;
+
+    [class*="onhover-"] {
+      @include before {
+        content: "";
+        position: absolute;
+        inset: 0 0 0 0;
+      }
+    }
+  }
+}

src/tools/mixins/_transitions.scss

@@ -47,6 +47,17 @@ $keyframes: (
   ripple-gray: true,
   flash: true,
   fadein: true,
+  fadeout: true,
+  grayscalein: true,
+  grayscaleout: true,
+  blurin: true,
+  blurout: true,
+  zoomin: true,
+  zoomin-reverse: true,
+  zoomout: true,
+  zoomout-reverse: true,
+  elevate: true,
+  elevate-reverse: true,
   spin: true
 ) !default;
 
@@ -78,6 +89,54 @@ $keyframes: (
         @keyframes fadein {
           from { opacity: 0; }
         }
+      } @else if $name == fadeout {
+        @keyframes fadeout {
+          to { opacity: 0; }
+        }
+      } @else if $name == grayscaleout {
+        @keyframes grayscaleout {
+          from { filter: grayscale(100); }
+        }
+      } @else if $name == grayscalein {
+        @keyframes grayscalein {
+          to { filter: grayscale(100); }
+        }
+      } @else if $name == blurout {
+        @keyframes blurout {
+          from { filter: blur(2px); }
+        }
+      } @else if $name == blurin {
+        @keyframes blurin {
+          to { filter: blur(2px); }
+        }
+      } @else if $name == zoomin-reverse {
+        @keyframes zoomin-reverse {
+          from { transform: scale(1.1); }
+        }
+      } @else if $name == zoomin {
+        @keyframes zoomin {
+          to { transform: scale(1.1); }
+        }
+      } @else if $name == zoomout-reverse {
+        @keyframes zoomout-reverse {
+          from { transform: scale(.95); }
+          to { transform: scale(1); }
+        }
+      } @else if $name == zoomout {
+        @keyframes zoomout {
+          from { transform: scale(1); }
+          to { transform: scale(.95); }
+        }
+      } @else if $name == elevate-reverse {
+        @keyframes elevate-reverse {
+          from { transform: translateY(-1em); }
+          to { transform: translateY(0); }
+        }
+      } @else if $name == elevate {
+        @keyframes elevate {
+          from { transform: translateY(0); }
+          to { transform: translateY(-1em); }
+        }
       } @else if $name == spin {
         @keyframes spin {
           100% { transform: rotate(360deg); }