ComboStrap Styling - Hover Animations

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

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

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

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

• On a button

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

A floated animated button

• On an image

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

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

• button

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

A zoom-in / grow animated button

• icon

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

A zoom-in / grow animated icon -

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>

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>

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

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>

A hover underline from left animated button

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>

A button animated with default Bootstrap class

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;
}

• clone the combo repository

git clone https://github.com/ComboStrap/combo

• add the CSS rule to the onhover.css stylesheet
• and apply a pull request.

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.

• The css in the userstyle stylesheet

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: