Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ciar4n/imagehover.css

Pure CSS Image Hover Effect Library
https://github.com/ciar4n/imagehover.css

Last synced: about 1 month ago
JSON representation

Pure CSS Image Hover Effect Library

Host: GitHub
URL: https://github.com/ciar4n/imagehover.css
Owner: ciar4n
License: mit
Created: 2016-03-05T15:03:01.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2022-07-04T15:09:47.000Z (almost 2 years ago)
Last Synced: 2024-05-05T04:22:45.557Z (about 1 month ago)
Language: HTML
Homepage: http://imagehover.io
Size: 352 KB
Stars: 1,795
Watchers: 62
Forks: 233
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

Awesome-CSS-Resources - imagehover.css:
awesome-web-effect - imagehover - Pure CSS Image Hover Effect Library (🚀 A series of exquisite and compact web page cool effects / Image Effect)
awesome-frontend - imagehover.css - 为图片添加悬停效果
awesome-css-only - Imagehover.css - Pure CSS Image Hover Effect Library. (Uncategorized / Uncategorized)
awesome-stars - imagehover.css
awesome-stars - ciar4n/imagehover.css - Pure CSS Image Hover Effect Library (others)
awesome-front-end - imagehover.css - 为图片添加悬停效果
awesome-stars - imagehover.css - Pure CSS Image Hover Effect Library (CSS)
awesome-stenudd - imagehover.css - Pure CSS Image Hover Effect Library (CSS)
awesome-stars - ciar4n/imagehover.css - Pure CSS Image Hover Effect Library (HTML)
awesome-stars - imagehover.css
awesome-frontend - imagehover.css - 为图片添加悬停效果
fucking-awesome-web-effect - imagehover - Pure CSS Image Hover Effect Library (🚀 A series of exquisite and compact web page cool effects / Image Effect)

README

        # imagehover.css

*A Scaleable & Light Image Hover CSS Library*

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. 

[Check out all the hover effects here!](http://www.imagehover.io/)

## NPM

  ```

  npm install imagehover.css

  ```

  

## CDN

  ```

  https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/2.0.0/css/imagehover.min.css

  ```

## Basic Usage

1. Include the stylesheet on your document's ``

  ```html

  

    

  

  ```

2. Place the following markup in to your HTML document

  ```html

  

    

    

      // Hover Content

    

  

  ```

3. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element. In the example above this has been set to 'imghvr-fade'. A full list of hover effects and their classes can be found [here!](http://www.imagehover.io/).

## Adding a Link

To link your image, add an empty <a> tag just after the figcaption element.

  ```html

  

    

    

      // Hover Content

    

    

  

  ```

## SASS

`.scss` source files are available if you use Sass as your CSS precompiler. It’s customizable and modular.

### Customizing variables

Imagehover.css provides a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**

For example, to change out the `background-color` and `color` for the ``, you'd do the following:

  ```scss

  // Imagehover.css overrides

  //

  // Copy variables from `_variables.scss` to this file to override default values without modifying source files.

  

  $figcaption-bg:  #1a480a; // Green

  $text-color:     #9C3636; // Red

  ```

#### Variable List

You can find and customize these variables in the `_variables.scss` file.

| Variable                    | Values                             | Description                                                                            |

| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |

| `$image-bg`                   | `#2266a5` (default), or any valid CSS color value | Specifies the `background-color` for the image.                           |

| `$figcaption-bg`           | `#135796` (default), or any valid CSS color value        | Specifies the `background-color` for the figcaption element.                       |

| `$figcaption-padding`           | `30px` (default), or any length or percentage        | Sets the `padding` on the figcaption element.                         |

| `$text-color`         | `#ffffff` (default), or any valid CSS color value       | Sets the text `color` for the figcaption element and any child ` elements`.      |

| `$border-color`       | `#ffffff` (default), or any valid CSS color value        | Sets the text `border-color` for ...                                |

| `$border-margin` | `5px` (default), or any valid length        | ...                                                                                    |

| `$border-width`      | `4px` (default), or any valid length        | ...     |

| `$transition-duration`      | `0.35s` (default), or any valid time value        | Sets the transition duration for the animation.                                |

| `$shift-distance`      | `10px` (default), or any valid length        | ...                              |

  

## 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 ✔ |