Izmir - 鼠标悬停图片CSS3动画特效库

<link rel="stylesheet" href="css/izmir.min.css">

<figure class="c4-izmir">

  <img src="demo.jpg" alt="Sample Image">

  <figcaption>

      <h3>

        Some sample text

      </h3>

    </div>

</figure>

<figure class="c4-izmir c4-border-vert">

  <img src="demo.jpg" alt="Sample Image">

  <figcaption>

    // Caption text

  </figcaption>

</figure>

<figure class="c4-izmir c4-image-zoom-in">

  <img src="demo.jpg" alt="Sample Image">

  <figcaption>

    // Caption text

  </figcaption>

</figure>

<figure class="c4-izmir">

  <img src="demo.jpg" 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>

<figure class="c4-izmir c4-gradient-top-left">

  <img src="demo.jpg" alt="Sample Image">

  <figcaption>

    // Caption text

  </figcaption>

</figure>