Hover Border Animation

This CSS library includes selection of animated border styles to choose from. These are applied by adding a border style class to the <figure>tag of your image hover element. In the following example we are applying the c4-border-vertborder hover effect.

<figureclass="c4-izmir c4-border-vert"><imgsrc="https://source.unsplash.com/WLUHO9A_xik/400x300"alt="Sample Image"><figcaption>    // Caption text                </figcaption></figure>

Border Classes

c4-border-center

c4-border-vert

c4-border-horiz

c4-border-top

c4-border-bottom

c4-border-left

c4-border-right

c4-border-top-left

c4-border-top-right

c4-border-bottom-left

c4-border-bottom-right

c4-border-corners-1

c4-border-corners-2

c4-border-cc-1

c4-border-ccc-1

c4-border-cc-2

c4-border-ccc-2

c4-border-cc-3

c4-border-ccc-3

c4-border-fade