Very flexible Hover css effects using Hover.css | 2my4edge

14 May 2015

Very flexible Hover css effects using Hover.css

I was used this css to my recent project, This is really nice and time consumes for css hover effects. Here it is very simple we just have to give to class name in the class and it will automatically takes that realted effect. this is very simple for hover effects. let me tell the details about the hover.css. 

hover css simple hover effects
DOWNLOAD            LIVE DEMO           MY LIVE DEMO

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, Sass, and LESS.

There are over 100 effects to choose from, including 2D transsitions, background transitions, border transitions, icon buttons, shadow and glow transitions, speech bubbles, and page curls.

hover.css is a stylesheet containing many different classes, each offering a different hover effect. If you’re comfortable with using CSS, then you most likely can jump straight in to using hover.css without the following tutorial. If that’s the case, you may like to skip further down into the article where I discuss some of the default CSS and hacks used to improve the appearance of hover.css effects — especially on mobile/tablet devices, browser support, SASS/LESS support and Grunt support.

HOW TO USE THIS
You just download the files and add the css file in <link> tag for style in <head> tag

<link href="css/hover.css" rel="stylesheet" media="all">

CLASS
<div href="#" class="hvr-float">
......
.....
......
</div>

FontAwesome with Icon Effects
Hover.css uses FontAwesome for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the <head></head> of your web page:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/
            font-awesome.min.css" rel="stylesheet" media="all">

Hover.css icons are added to elements via the :before pseudo-element. Let’s take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):

.hvr-icon-forward:before {
    content: "\f138";
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    transform: translateZ(0);
    transition-duration: 0.1s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

Most important in the above example are the font-family and content declarations. font-family: FontAwesome tells the browser we want to use a FontAwesome icon in this pseudo-element, and the content value says which one. Should you wish to change the icon, change the value of the content property. A full list of the values and the icon they represent can be found here.
If you’d rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet):

.hvr-icon-forward:before {
    content: "\f001";
}

The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).

License
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.

Placing author information in your stylesheet, credits page or humans.txt is much appreciated.

No comments:

Post a Comment

^