Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ***********************How to Use Hover.css***************************
- First download the hover.css file from github : https://github.com/ILunn/Hoveran
- Than How can be we use it..................
- 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.
- For that fllow the below step.........
- 1. Download hover.css
- 2. In hover.css, find the 'Grow' CSS.
- /* Grow */
- .grow {
- display: inline-block;
- -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);
- }
- .grow:hover {
- -webkit-transform: scale(1.1);
- -ms-transform: scale(1.1);
- transform: scale(1.1);
- }
- 3. Copy this effect and then paste it into your own stylesheet.
- 4. In the HTML file which you'd like the effect to appear, add the class of .grow to your chosen element.
- before applying hover.css effect:: <a class="button">Add to Basket</a>
- after applying hover.css effect:: <a class="button grow">Add to Basket</a>
- like That you can add all of the effect in your website.
- **********************************
- If you plan on using many of hover.css' effects on your website, you may like to reference the entire hover.css stylesheet.
- 1. Download hover-min.css
- 2. Add hover-min.css to your websites files, in a directory named css for example.
- 3. Reference hover-min.css in <head> of the HTML page you'd like to add hover.css effects to:
- <head>
- <link href="css/hover-min.css" rel="stylesheet">
- </head>
- 4.In the HTML file which you'd like the effect to appear, add the class of .grow to your chosen element.like bellow....
- before applying hover.css effect:: <a class="button">Add to Basket</a>
- after applying hover.css effect:: <a class="button grow">Add to Basket</a>
Add Comment
Please, Sign In to add comment
