mirror of https://github.com/IanLunn/Hover.git
149 lines
6.8 KiB
HTML
149 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta property="og:image" content="http://ianlunn.github.io/Hover/hover.jpg" />
|
|
<meta property="og:site_name" content="Hover.css"/>
|
|
<meta property="og:title" content="Hover.css - A collection of CSS3 powered hover effects" />
|
|
<title>Hover.css - A collection of CSS3 powered hover effects</title>
|
|
<link href="css/demo-page.css" rel="stylesheet" media="all">
|
|
<link href="css/hover.css" rel="stylesheet" media="all">
|
|
</head>
|
|
<body>
|
|
|
|
<span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
|
|
|
|
<h1>Hover.css</h1>
|
|
|
|
<p class="intro">A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.<p>
|
|
|
|
<div class="social aligncenter">
|
|
<div class="social-button">
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
|
|
</div>
|
|
|
|
<div class="social-button">
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aligncenter">
|
|
<a class="button cta hvr-float-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a><br />
|
|
<a class="tutorial hvr-pop" href="http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/">Read Tutorial →</a>
|
|
</div>
|
|
|
|
<div class="effects">
|
|
|
|
<h2>2D Transforms</h2>
|
|
|
|
<a href="#" class="hvr-grow">Grow</a>
|
|
<a href="#" class="hvr-shrink">Shrink</a>
|
|
<a href="#" class="hvr-pulse">Pulse</a>
|
|
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>
|
|
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
|
|
<a href="#" class="hvr-push">Push</a>
|
|
<a href="#" class="hvr-pop">Pop</a>
|
|
<a href="#" class="hvr-rotate">Rotate</a>
|
|
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>
|
|
<a href="#" class="hvr-float">Float</a>
|
|
<a href="#" class="hvr-sink">Sink</a>
|
|
<a href="#" class="hvr-bob">Bob</a>
|
|
<a href="#" class="hvr-hang">Hang</a>
|
|
<a href="#" class="hvr-skew">Skew</a>
|
|
<a href="#" class="hvr-skew-forward">Skew Forward</a>
|
|
<a href="#" class="hvr-skew-backward">Skew Backward</a>
|
|
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
|
|
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
|
|
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
|
|
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
|
|
<a href="#" class="hvr-wobble-top">Wobble Top</a>
|
|
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
|
|
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
|
|
<a href="#" class="hvr-buzz">Buzz</a>
|
|
<a href="#" class="hvr-buzz-out">Buzz Out</a>
|
|
|
|
|
|
|
|
<h2>Border Transitions</h2>
|
|
|
|
<a href="#" class="hvr-border-fade">Border Fade</a>
|
|
<a href="#" class="hvr-hollow">Hollow</a>
|
|
<a href="#" class="hvr-trim">Trim</a>
|
|
<a href="#" class="hvr-outline-outward">Outline Outward</a>
|
|
<a href="#" class="hvr-outline-inward">Outline Inward</a>
|
|
<a href="#" class="hvr-round-corners">Round Corners</a>
|
|
|
|
|
|
|
|
<h2>Shadow and Glow Transitions</h2>
|
|
|
|
<a href="#" class="hvr-glow">Glow</a>
|
|
<a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
|
|
<a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>
|
|
<a href="#" class="hvr-float-shadow">Float Shadow</a>
|
|
<a href="#" class="hvr-shadow-radial">Shadow Radial</a>
|
|
|
|
|
|
|
|
<h2>Speech Bubbles</h2>
|
|
|
|
<a href="#" class="hvr-bubble-top">Bubble Top</a>
|
|
<a href="#" class="hvr-bubble-right">Bubble Right</a>
|
|
<a href="#" class="hvr-bubble-bottom">Bubble Bottom</a>
|
|
<a href="#" class="hvr-bubble-left">Bubble Left</a>
|
|
<a href="#" class="hvr-bubble-float-top">Bubble Float Top</a>
|
|
<a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>
|
|
<a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
|
|
<a href="#" class="hvr-bubble-float-left">Bubble Float Left</a>
|
|
|
|
|
|
|
|
<h2>Curls</h2>
|
|
|
|
<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
|
|
<a href="#" class="hvr-curl-top-right">Curl Top Right</a>
|
|
<a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
|
|
<a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer">
|
|
<div class="about">
|
|
<h2>About Hover.css</h2>
|
|
|
|
<p>All 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 and SASS flavours.</p>
|
|
|
|
<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, <a href="https://github.com/IanLunn/Hover/wiki/Hacks-Explained">please read the FAQ</a>.</p>
|
|
|
|
<p>Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.</p>
|
|
|
|
<h3>License</h3>
|
|
|
|
<p>hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
|
|
|
|
<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
|
|
</div>
|
|
|
|
<div class="author">
|
|
<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hvr-bob" src="logo-transparent.png" width="60" height="60" /></a>
|
|
|
|
<p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for tweets, opinions, and links<br /> reating to CSS3, HTML5, and JavaScript</p>
|
|
<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn - Front End Web Developer</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-11991680-4', 'ianlunn.github.io');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|