ComboStrap Styling - Hover Animations

About

hover animation permits to add animations to your block component when the mouse points an element (ie is hover).

Syntax

To add an hover animation, add a onHover attribute with the name of your animation.

<blockComponent onHover="animationName animationName ..."></blockComponent>

Animation

Float

When you want to add dynamic elevation, you can use the float animation

<button onHover="float">A floated animated button</button>

{{:docs:styling:subway_card_tile.png?onHover=float|}}

Grow

When you want to add a zoom-in effect, you can use the grow animation

<button onHover="grow">A zoom-in / grow animated button</button>

A zoom-in / grow animated icon - <icon width="50px" height="50px" onHover="grow" name="logo.svg" />

A zoom-in / grow animated icon -

Shadow

You can use the shadow animation name to add a shadow on hover.

<card onHover="shadow-lg" width="300px" height="150px">A animated card with a shadow</card>

A animated card with a shadow

Combination

Float Shadow

You can combine the effects, example with float and a shadow

<card onHover="float shadow" width="300px" height="150px">A combo float shadow animated card</card>

A combo float shadow animated card

Beware that if you replace the space by a minus, you get the float-shadow hover.css effect.

<card onHover="float-shadow" width="300px" height="150px">A hover.css float-shadow animated card</card>

A hover.css float-shadow animated card

Hover.css

You can also use Hover.css animation.

We support the hover.cssnaming standard.

Example:

<button onHover="underline-from-left" skin="text">A hover underline from left animated button</button>

The library is not primary supported because:

  • there is some incompatibility with BootStrap
  • they require a commercial license if not for personal use.

If you underline problems, you can also add your own.

Custom

Custom: Bootstrap Class

If the animation name is not found, the name is applied as a class. You can then used all Bootstrap utility class to create an hover effect.

Example from an outlined button to a contained one with the Bootstrap button class where:

  • btn-lg means a larger button
  • btn-primary means with a color background
<button skin="outline" onHover="btn-lg btn-primary" align="center">
A button animated with default Bootstrap class
</button>

Custom: Bring it to Combostrap

The hover animation applies the name of the animation as a class to the component when the mouse is hover it.

If you want to bring your animation to ComboStrap:

  • create a CSS class rule to apply on hover. Example: A darken animation:
.darken {
      opacity: 0.5;
}
git clone https://github.com/ComboStrap/combo

Custom: UserStyle

If you want to create an animation for yourself, add the CSS class rules in the userstyles stylesheet.

Example with the fade like background transition of hover.css.

button.animated:hover {
    background-color: #FFF;
    color: #2098D1;
    transition-duration: 0.4s;
    transition-property: color, background-color;
}
  • In your page
<button class="animated">
A button animated with a fade background transition
</button>
  • Result:
Powered by ComboStrap