Hover effects

Unlock More Control over Your Design with Vitamin Hover Properties


How it works

With Vitamin, adding hover effects to your design has never been easier. Simply add an -h to your existing classes and you're good to go. Whether you want to change the opacity or background color of your elements on hover, Vitamin has you covered.

Vitamin provides a range of hover options, making it easy to add hover effects to your design. Whether you want to increase the opacity, change the background color, or transform the size of an element, it's now possible with just a few simple classes.

Available hover effects

General

  • .text-h for text color
  • .bg-h for background color
  • .opacity-h for opacity property
  • .shadow-h for shadow effect

Transform

  • .rotate-h for rotate property
  • .scale-h for scale property
  • .translate-h for translate property
  • .perspective-h for perspective property

Filters

  • .Blur-h for Blur effect
  • .contrast-h for contrast effect
  • .gray-h for gray effect
  • .sepia-h for sepia effect
  • .bright-h for bright effect
  • .dark-h for dark effect
  • .hue-h for hue effect
  • .invert-h for invert effect
  • .saturate-h for saturate effect

If you dont want the .3 ease transition (default on our hover effects), you can use this class:

  • .no-transition for setting transition to .0s

Examples

Here are some representative examples of these classes:

    
.blur-h-1:hover {
filter: blur(0.5px);
transition: var(--transition);
}

.text-h-primary:hover {
color: var(--bs-primary) !important;
transition: var(--transition);
}
  
.bg-h-success:hover {
background-color: var(--bs-success) !important;
transition: var(--transition);
}