A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.
hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
###Copy and Paste an Effect If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download hover.css in its entirety.
Assuming you want to use the Grow effect:
-
Download hover.css
-
In hover.css, find the 'Grow' CSS (each effect is named using a comment above it):
/* Grow */ .hvr-grow { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-grow:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
-
Copy this effect and then paste it into your own stylesheet.
-
In the HTML file which you'd like the effect to appear, add the class of
.hvr-growto your chosen element.
Example element before applying hover.css effect:
<a href="#">Add to Basket</a>Example element after applying hover.css effect:
<a href="#" class="hvr-grow">Add to Basket</a>Note: As of 2.0.0 all hover.css class names are prefixed with hvr- to prevent conflicts with other libraries/stylesheets. If using SASS, this can easily be changed using the $nameSpace variable in scss/_options.scss.
If you plan on using many hover.css effects, you may like to reference the entire hover.css stylesheet.
- Download
hover-min.css - Add
hover-min.cssto your websites files, in a directory namedcssfor example - Reference
hover-min.cssin<head>of the HTML page you'd like to add hover.css effects to:
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>- Assuming you want to use the 'Grow' effect, in the HTML file you'd like to use this effect, add the class of
.hvr-growto your chosen element.
Example element before applying hover.css effect:
<a href="#" class="button">Add to Basket</a>Example element after applying hover.css effect:
<a href="#" class="button hvr-grow">Add to Basket</a>To make an element "transformable", hover.css gives the following to all elements it is applied to:
display: inline-block;
vertical-align: middle;Should you wish to override this behavior, either remove the above CSS from hover.css or change the display property for the element. Be sure to declare the override after the hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the SASS version of hover.css, you can remove/comment out the forceBlockLevel() mixin found in scss/_hacks.scss.
For more information about Transformable elements, see the CSS Transforms Module.
The project consists of the following folders and files:
- demo-page.css - Contains styles to demonstrate Hover. Not required in your projects
- hover-min.css - The minified/production version of hover.css
- hover.css - The development version of hover.css
- effects - Contains each individual effect sorted into categorized folders
- _hacks.scss, _mixins.scss, _options.scss - SASS Utilities
- hover.scss - Development/SCSS version of hover.css
Other files of note include:
- index.html - Demonstrates all hover.css effects
- Gruntfile.js - Used for development of hover.css via Grunt.
Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.
- Transitions and Animations - not supported below Internet Explorer 9
- Transforms - not supported below Internet Explorer 10
- Generated Content (pseudo-elements) - not supported below Internet Explorer 8
Aside from the above mentioned browsers, hover.css is supported across all major browsers. Please see caniuse.com for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as Modernizr.
Grunt is non-essential but can speed up development. With Grunt installed, run grunt from the command line to set up a development server accessed at http://127.0.0.1:8000/. With Grunt running, SASS will be preprocessed and CSS files will be minified.
Note: Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The prefixed(property, value) SASS mixin should be used for browser prefixing instead. See Using SASS for Development.
SASS is non-essential but can speed up development. Preprocess SASS with your favourite software or the environment provided via Grunt.
SASS is used in the hover.css project to separate various CSS into specific files. Each effect is within its own file in the effects directory. hover.css also uses the following .scss files:
Contains some hacks applied to certain effects. Hacks explained here.
Contains prefixed(property, value) and keyframes(keyframe-name) mixins that apply the necessary prefixes you specify in _options.scss to properties and keyframes.
prefixed(property, value) can be used like so:
@include prefixed(transition-duration, .3s);
The prefixed(property, value) mixin is passed the property you want to prefix, followed by its value.
keyframes(keyframe-name) can be used like so:
@include keyframes(my-animation) {
to {
color: red;
}
}
The keyframes(keyframe-name) mixin is passed the keyframe name, followed by the content of your keyframe within parenthesis {}.
Contains default options, various effect options and the browser prefixes you'd like to use with the prefixed() mixin. By default, only the -webkit- prefix is set to true (due to most browsers not requiring prefixes now).
As of 2.0.0, _options.scss also includes a $nameSpace option which allows you to change the name all classes are prefixed with. The default namespace is hvr.
hover.css is open source, and made available under a MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
Retaining the author information at the top of hover.css and placing it on your credits page or humans.txt is much appreciated.
Ian Lunn is a Freelance Front-end Developer and author of CSS3 Foundations.
Hire Ian for responsive websites, WordPress websites, animation, and optimization.
To support the future development of hover.css and other open source projects created by Ian Lunn, please consider making a donation.
Your donation is not-for-profit (or beer!), and will allow Ian to spend a little less time on client projects and more time supporting and creating open source software.
Thank you.
Bitcoin:
Bitcoin donations may be sent to the following address:
1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd