---json
{
    "description": "Improve the emphasis of your component by adding onHover animation",
    "page_id": "jjtvm4r62zdl4dconm731",
    "title": "Hover animation"
}
---
====== ComboStrap Styling - Hover Animations ======


===== About =====
''hover animation'' permits to add animations to your [[docs:block:block|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.

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

===== Animation =====
==== Float ====

When you want to add [[docs:styling:shadow|dynamic elevation]], you can use the ''float'' animation

  * On a [[docs:content:button|button]]
<webcode name="Default" frameborder="0">
<code dw>
<button onHover="float">A floated animated button</button>
</code>
</webcode>

  * On an [[docs:content:image|image]]
<webcode name="Default" frameborder="0">
<code dw>
{{:docs:styling:subway_card_tile.png?onHover=float|}}
</code>
</webcode>


==== Grow ====

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

  * [[docs:content:button|button]]
<webcode name="Default" frameborder="0">
<code dw>
<button onHover="grow">A zoom-in / grow animated button</button>
</code>
</webcode>
  * [[docs:content:icon|icon]]
<webcode name="Default" frameborder="0">
<code dw>
A zoom-in / grow animated icon - <icon width="50px" height="50px" onHover="grow" name="logo.svg" />
</code>
</webcode>

==== Shadow====

You can use the [[docs:styling:shadow#syntax|shadow animation name]] to add a shadow on hover.

<webcode name="Default" frameborder="0">
<code dw>
<card onHover="shadow-lg" width="300px" height="150px">A animated card with a shadow</card>
</code>
</webcode>

===== Combination =====

==== Float Shadow ====

You can combine the effects, example with ''float'' and a [[docs:styling:shadow|shadow]]

<webcode name="Default" frameborder="0">
<code dw>
<card onHover="float shadow" width="300px" height="150px">A combo float shadow animated card</card>
</code>
</webcode>


<note>
Beware that if you replace the space by a minus, you get the ''float-shadow'' [[#hover.css|hover.css effect]].
<webcode name="Default" frameborder="0">
<code dw>
<card onHover="float-shadow" width="300px" height="150px">A hover.css float-shadow animated card</card>
</code>
</webcode>
</note>

===== Hover.css =====
You can also use [[https://ianlunn.github.io/Hover/|Hover.css]] animation.

We support the ''hover.css''naming standard.

Example: a [[:docs:content:button|button]] with an underline animated from left
<webcode name="Default" frameborder="0">
<code dw>
<button link onHover="underline-from-left" >A hover underline from left animated button</button>
</code>
</webcode>


<note>
The library is not primary supported because:
  * there is some incompatibility with [[docs:theme:bootstrap|BootStrap]]
  * they require a commercial license if not for personal use.
If you underline problems, you can also [[#custom|add your own]].
</note>

===== 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 [[:docs:content:button|normal button]] to a bigger one with the ''btn-lg'' [[https://getbootstrap.com/docs/5.0/components/buttons/|Bootstrap button class]] where ''lg'' means a ''larger button''
<webcode name="Custom" frameborder="0">
<code dw>
<button info onHover="btn-lg" align="center">
A button animated with default Bootstrap class
</button>
</code>
</webcode>

\\
\\
\\
==== 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:
<code css>
.darken {
      opacity: 0.5;
}
</code>
  * clone the [[https://github.com/ComboStrap/combo|combo repository]]
<code bash>
git clone https://github.com/ComboStrap/combo
</code>
  * add the CSS rule to the [[https://github.com/ComboStrap/combo/tree/master/resources/snippet/style/onhover.css|onhover.css stylesheet]]
  * and apply a pull request.

==== Custom: UserStyle ====

If you want to create an animation for yourself, add the CSS class rules in the ''onhover'' [[:docs:theme:component-stylesheet|component stylesheet]]



Example with the ''fade'' like background transition of [[https://ianlunn.github.io/Hover/|hover.css]].
<webcode name="Fade">
  * The CSS 
<code css userstyle.css>
button.animated:hover {
    background-color: #FFF;
    color: #2098D1;
    transition-duration: 0.4s;
    transition-property: color, background-color;
}
</code>
<code css display="none">
button {
    background-color: #007bff;
    color: #FFF;
    border-color: #007bff;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: .25rem;
}
</code>
  * In your page
<code html>
<button class="animated">
A button animated with a fade background transition
</button>
</code>
  * Result:
</webcode>