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

Category: CSS & CSS3 , Image | November 11, 2019
Author: ciar4n
Views Total: 95
Official Page: Go to website
Last Update: November 11, 2019
License: MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply