32 Smooth Image Hover Effects – ImageHover

Category: Animation , CSS & CSS3 | April 4, 2023
Author:zkreations
Views Total:160 views
Official Page:Go to website
Last Update:April 4, 2023
License:MIT

Preview:

32 Smooth Image Hover Effects – ImageHover

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

You Might Be Interested In:


Leave a Reply