Hover Image Animation

Also included is a selection of animated image effects to choose. These are applied by adding a image style class to the <figure> tag of your image hover element. In the following example we are applying the c4-image-zoom-in image hover effect.

<figure class="c4-izmir c4-image-zoom-in">
  <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
  <figcaption>
    // Caption text
  </figcaption>
</figure>

Image Classes

c4-image-zoom-in

c4-image-zoom-out

c4-image-pan-up

c4-image-pan-down

c4-image-pan-left

c4-image-pan-right

c4-image-rotate-left

c4-image-rotate-right

c4-image-blur