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-vert border hover effect.

<figure class="c4-turin c4-border-vert">
  <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
  <figcaption>
    // Caption text
  </figcaption>
</figure>

Border Classes

c4-border-fade

c4-border-zoom-in

c4-border-zoom-out

c4-border-slide-top

c4-border-slide-bottom

c4-border-slide-left

c4-border-slide-right

c4-border-slide-top-left

c4-border-slide-top-right

c4-border-slide-bottom-left

c4-border-slide-bottom-right

c4-border-vert

c4-border-horiz

c4-border-skew

c4-border-flip-vert

c4-border-flip-horiz

c4-border-hinge-top

c4-border-hinge-bottom

c4-border-hinge-left

c4-border-hinge-right

c4-border-slam

c4-border-deal-horiz

c4-border-deal-vert

c4-border-reveal-top

c4-border-reveal-bottom

c4-border-reveal-left

c4-border-reveal-right

c4-border-spin-in

c4-border-spin-out

</div>