https://github.com/ciar4n/Izmir

Izmir - An image hover mini CSS library
https://github.com/ciar4n/Izmir

animation css css-animations css-libraries

Last synced: 1 day ago
JSON representation

Izmir - An image hover mini CSS library

• Host: GitHub
• URL: https://github.com/ciar4n/Izmir
• Owner: ciar4n
• License: mit
• Created: 2019-11-01T18:54:29.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-04-11T20:24:35.000Z (over 2 years ago)
• Last Synced: 2024-11-07T17:01:36.441Z (6 days ago)
• Topics: animation, css, css-animations, css-libraries
• Language: SCSS
• Homepage: https://ciar4n-izmir.netlify.app
• Size: 1.85 MB
• Stars: 392
• Watchers: 11
• Forks: 52
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Introduction

Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites. Simply load the CSS library in to your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.

## Features

* 1000's of possible style combinations

* 20 animated border effects

* 9 animated image effect

* 12 animated text effects

* Overlay style classes

* Animation delay classes

* Text layout classes

* Collection of custom properties to further custom style your element

  * Border width

  * Border margin

  * Border color

  * Primary color

  * Secondary color

  * Text color

  * Image hover opacity

  * Image hover color

  * Image hover gradient

* Accesible (hover triggered on focus)

* Ultra small file size (2KB GZipped)

* Complete documentation

## NPM

  ```

  npm install @ciar4n/izmir

  ```

## Setup

1. Extract and copy the CSS files in the root of your download folder to your projects CSS folder.

2. Include a link to the CSS your document's `` tags

```html

```

3. Use the following markup to create the most basic instance of an image hover element..

```html

  

  

    
Some sample text

  


```

## License

Izmir CSS Library is licensed under the MIT license. (http://opensource.org/licenses/MIT)