Purchase | Read full license Extended Commercial License
Your code is kept proprietary, to yourself.Personal/Open Sourceįor personal/open source use, Hover.css is made available under a MIT license:įor commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.
Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Many effects use CSS3 features such as transitions, transforms and animations. Icon Buzz Out Border Transitions Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right Shadow and Glow Transitions Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset Speech Bubbles Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left Curls Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom LeftĪll Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. With this one, the image will fade out to start and then back in again as the visitor keeps scrolling.2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical Icons Demo font icons courtesy of FontAwesome. Then, the image will appear normal at first and increase in transparency as a visitor scrolls down.įinally, another option is Fade Out In. If you wanted to reverse that, you could choose Fade Out. As the image moves up, it will become less transparent, eventually reaching its original appearance when it reaches the top of a visitor’s viewport (100%). If you set the Bottom viewport to 0% and the Top to 100%, the image will be transparent when it first appears at the bottom of a visitor’s viewport (0%).
Next, let’s dig into the Viewport option and see how it works.įirst, it’s important to define the term – a visitor’s viewport is the visible size of a user’s device screen.