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.
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.
RELATED POSTS :
Change color to black and white image using css
Change text & background color while selecting text using CSS3
Create custom file chosen input type using Css and Jquery
Rotate image on hover using CSS3
Image zoom on hover using css3
Place the Text on image using CSS
How to make fixed background image for all browser using Css
Simple blinking effect using css3 and Jquery
Thanks a bunch for sharing this with all folks you actually
ReplyDeleteunderstand what you're talking about! Bookmarked. Kindly additionally seek
advice from my website =). We can have a hyperlink trade arrangement
among us