1000+ Modern Image Hover Effects In Pure CSS – Izmir.css

Preview:

Description:

Izmir.css is a small yet robust CSS library that provides 1000+ animated hover effects when hovering over images. Includes 9 image effects, 12 text effects, 8 overlay effects, and 20 border effects (1000+ combinations).

Works with the HTML figure element and easy to config using CSS classes or custom CSS rules.

How to use it:

1. Download and import the Izmir.css stylesheet in the document.

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

2. Insert your image into the figure element with the CSS class of c4-izmir and define the description of the image in the figcaption element.

<figure class="c4-izmir">
  <img src="1.jpg" alt="Image Alt">
  <figcaption>
    <h3>
      Image Description Here
    </h3>
  </figcaption>
</figure>

3.  Apply border effects to the image:

• 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

<figure class="c4-izmir c4-border-center">
  <img src="1.jpg" alt="Image Alt">
  <figcaption>
    <h3>
      Image Description Here
    </h3>
  </figcaption>
</figure>

4.  Apply image effects to the image:

• 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

<figure class="c4-izmir c4-image-zoom-in">
  <img src="1.jpg" alt="Image Alt">
  <figcaption>
    <h3>
      Image Description Here
    </h3>
  </figcaption>
</figure>

5.  Apply text effect to the description:

• 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

<figure class="c4-izmir">
  <img src="1.jpg" alt="Image Alt">
  <figcaption>
    <div class="c4-reveal-up">
      <h3>
        Image Description Here
      </h3>
    </div>
  </figcaption>
</figure>

6. Apply gradients to the overlay.

• c4-gradient-top
• c4-gradient-left
• c4-gradient-right
• c4-gradient-bottom
• c4-gradient-top-left
• c4-gradient-top-right
• c4-gradient-bottom-left
• c4-gradient-bottom-right

<figure class="c4-izmir c4-gradient-top">
  <img src="1.jpg" alt="Image Alt">
  <figcaption>
    <h3>
      Image Description Here
    </h3>
  </figcaption>
</figure>

7. Customize the position of the image caption.

• c4-layout-top-left
• c4-layout-top-center
• c4-layout-top-right
• c4-layout-center-left
• c4-layout-center-right
• c4-layout-bottom-left
• c4-layout-bottom-center
• c4-layout-bottom-right

<figure class="c4-izmir">
  <img src="1.jpg" alt="Image Alt">
  <figcaption class="c4-layout-top-left">
    <h3>
      Image Description Here
    </h3>
  </figcaption>
</figure>

8. Add a delay to the image caption.

<figure class="c4-izmir">
  <img src="1.jpg" alt="Image Alt">
  <figcaption class="c4-layout-top-left">
    <div class="c4-reveal-down">
      <h3>
        Sample Text 1
      </h3>
    </div>
    <div class="c4-reveal-left c4-delay-200">
      <h3>
        Sample Text 2
      </h3>
    </div>
    <div class="c4-reveal-right c4-delay-400">
      <h3>
        Sample Text 3
      </h3>
    </div>
    <div class="c4-reveal-up c4-delay-600">
      <h3>
        Sample Text 4
      </h3>
    </div>
  </figcaption>
</figure>