# image-hover

**Repository Path**: Turkyden/image-hover

## Basic Information

- **Project Name**: image-hover
- **Description**: 💄 纯 CSS + HTML 实现，一组开箱即用的鼠标滑过图片效果合集。
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://turkyden.com/image-hover/
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-11-13
- **Last Updated**: 2021-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

English | [简体中文](./README_cn-zh.md)

<h1 align="center">Image Hover Effects</h1>

<p align="center">
  <em><del>No Javascript</del>, a lightweight CSS collection of image hover effects you've always wanted.
  <a href="http://turkyden.github.io/image-hover/">Preview &rarr;</a>
  </em>
</p>

<p align="center">
  <img alt="GitHub" src="https://img.shields.io/github/license/Turkyden/image-hover">
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/image-hover">
    <img src="https://data.jsdelivr.com/v1/package/npm/image-hover/badge?style=rounded">
  </a>
  <a target="_blank" href="https://github.com/Turkyden/image-hover/actions"><img src="https://github.com/Turkyden/image-hover/workflows/build-and-deploy/badge.svg" ></a>
</p>

<p align="center">
  <a target="_blank" href="http://turkyden.github.io/image-hover/">
    <img alt="Image Hover Demo" src="https://cdn.jsdelivr.net/gh/turkyden/image-hover/README.gif">
  </a>
</p>

## Effects

| Category | Name |
| ----- | ----- |
| fade | `fade` `fade-in-up` `fade-in-down` `fade-in-left` `fade-in-right` |
| flip | `flip-diag-1` `flip-diag-2` `flip-horiz` `flip-vert` |
| hinge | `hinge-up` `hinge-down` `hinge-left` `hinge-right` |
| push | `push-up` `push-down` `push-left` `push-right` |
| reveal | `reveal-up` `reveal-down` `reveal-left` `reveal-right` `reveal-top-left` `reveal-top-right` `reveal-bottom-left` `reveal-bottom-right` |
| shutter | `shutter-in-horiz` `shutter-in-vert` `shutter-in-out-horiz` `shutter-in-out-vert` `shutter-in-out-diag-1` `shutter-in-out-diag-2` `shutter-out-diag-1` `shutter-out-diag-2` `shutter-out-horiz` `shutter-out-vert` |
| slide | `slide-up` `slide-down` `slide-left` `slide-right` `slide-top-left` `slide-top-right` `slide-bottom-left` `slide-bottom-right` |

## Contribute

``` npm
npm install
```

### Compiles and hot-reloads for development

``` npm
npm run serve
```

### Compiles and minifies for production

``` npm
npm run build
```

### Lints and fixes files

``` npm
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | Latest ✔ | Latest ✔ |

## LICENSE

MIT & Inspired by [imagehover.css](https://github.com/ciar4n/imagehover.css)