css3鼠标悬停图片动画特效库Izmir Izmir - An image hover mini CSS library

Hover Text Animation

With each image you can add content between the figcaption tags which will be displayed on hover of the image. Animations can be applied to this content by wrapping in a div with a text animation class applied. Multiple divs can included to apply different animations to content. In the following markup we are applying the c4-reveal-up hover effect is been applied to the h3 tag and c4-reveal-down is been applied to the <p> tag.

<figure class="c4-izmir">
  <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
  <figcaption>
    <div class="c4-reveal-up">
      <h3>
        Sample Text
      </h3>
    </div>
    <div class="c4-reveal-up">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      </p>
    </div>
  </figcaption>
</figure>

Text Animation Classes

c4-reveal-up

c4-reveal-down

c4-reveal-left

c4-reveal-right

c4-fade-up

c4-fade-down

c4-fade-left

c4-fade-right

c4-rotate-up-right

c4-rotate-up-left

c4-rotate-down-right

c4-rotate-down-left