Hover animation

Undraw My Documents

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

Subway Card Tile

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: a button with an underline animated from left

<button link onHover="underline-from-left" >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 normal button to a bigger one with the btn-lg Bootstrap button class where lg means a larger button

<button info onHover="btn-lg" 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 onhover component stylesheet

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

  • The 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:




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Undraw My Documents
How to add emphasis in your website (ComboStrap)

This article shows you how you can add emphasis on component in your page
Undraw My Documents
How to animate your component in ComboStrap

ComboStrap offers animation such as on scroll and on hover. This article list them all.
SVG to fitViewport 1Viewport 2--------------- meet ---------------xMin*xMid*xMax*---------- meet ----------*YMin*YMid*YMax---------- slice ----------xMin*xMid*xMax*--------------- slice ---------------*YMin*YMid*YMax
How to use a SVG in ComboStrap

ComboStrap supports natively SVG and allows you to use them as image, illustration and background
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Lazy Responsive Load
Raster Image in ComboStrap (jpg, png, ...)

From lazy loading to automatic resizing, this page tells you how ComboStrap manages raster image



Task Runner