32 Smooth Image Hover Effects – ImageHover

Preview:

Description:

Yet another CSS library that provides 30+ CSS/CSS3 powered, pretty cool hover effects for images.

How to use it:

1. Install & download.

# NPM
$ npm i @zkreations/imagehover

2. Import the ImageHover.

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

3. Add the following CSS classes to your images.

• img-fade
• img-slide-up
• img-slide-down
• img-slide-left
• img-slide-right
• img-push-up
• img-push-down
• img-push-left
• img-push-right
• img-flip-up
• img-flip-down
• img-flip-left
• img-flip-right
• img-flip-x
• img-flip-y
• img-flip-xy
• img-back-up
• img-back-down
• img-back-left
• img-back-right
• img-blinds-y
• img-blinds-y-up
• img-blinds-y-down
• img-blinds-y-left
• img-blinds-y-right
• img-blinds-y-center
• img-blinds-x
• img-blinds-x-up
• img-blinds-x-down
• img-blinds-x-left
• img-blinds-x-right
• img-blinds-x-center

<figure class="img-fade">
  <img src="1.jpg" />
  <figcaption>Text here</figcaption>
</figure>

Changelog:

v1.1.0 (04/04/2023)

• update dependencies