Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
474 lines (471 sloc) 23.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta property="og:image" content="http://www.imagehover.io/imagehover-og.jpg">
<meta property="og:site_name" content="Imagehover.css">
<meta property="og:title" content="Imagehover.css - An Image Hover CSS Library">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Imagehover.css - An Image Hover CSS Library</title>
<link href="css/demo-page.css" rel="stylesheet" media="all">
<link href="css/imagehover.css" rel="stylesheet" media="all">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
</head>
<body>
<div class="main"><span id="forkongithub"><a href="https://github.com/ciar4n/imagehover.css">Fork me on GitHub</a></span>
<h1>imagehover.css <a href="#" title="View release history" class="sup">v1.1</a></h1>
<div class="intro">
<h2>A Scaleable & Light Image Hover CSS Library</h2>
<p>Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only <b>19KB</b>. </p>
<iframe src="https://ghbtns.com/github-btn.html?user=ciar4n&repo=imagehover.css&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
<div class="download"><a href="https://github.com/ciar4n/imagehover.css/archive/master.zip" class="download-btn">Download</a>
<p class="version">Version 1.1 - <a href="https://github.com/ciar4n/imagehover.css">Github</a></p>
</div>
<hr>
<div class="markup">
<h3>The Mark-Up</h3>
<p>Once you have included the imagehover.css. Place the following markup in to your HTML document. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element. In the example below this has been set to 'imghvr-fade'. A full list of hover effects and their classes can be found below.</p>
<pre class="prettyprint">
&lt;figure class=&quot;imghvr-fade&quot;&gt;
&lt;img src=&quot;#&quot;&gt;
&lt;figcaption&gt;
// Hover Content
&lt;/figcaption&gt;
&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;
&lt;/figure&gt;
</pre>
<p>Further information on usage can be found here - <a href="https://github.com/ciar4n/imagehover.css">https://github.com/ciar4n/imagehover.css</a></p>
</div>
<hr>
<div class="effects">
<h3>The Classes</h3>
<div class="demo">
<figure class="imghvr-fade"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fade</textarea>
</div>
<div class="demo">
<figure class="imghvr-push-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-push-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-push-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-push-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-slide-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-slide-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-slide-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-slide-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-reveal-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-reveal-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-reveal-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-reveal-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-hinge-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-hinge-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-hinge-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-hinge-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-flip-horiz"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-flip-vert"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-flip-diag-1"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-diag-1</textarea>
</div>
<div class="demo">
<figure class="imghvr-flip-diag-2"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-diag-2</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-out-horiz"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-out-vert"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-out-diag-1"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-diag-1</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-out-diag-2"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-diag-2</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-horiz"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-vert"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-out-horiz"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-out-vert"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-out-diag-1"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-diag-1</textarea>
</div>
<div class="demo">
<figure class="imghvr-shutter-in-out-diag-2"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-diag-2</textarea>
</div>
<div class="demo">
<figure class="imghvr-fold-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-fold-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-fold-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-fold-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-in"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-in</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-up"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-left"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-right"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-flip-horiz"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-flip-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-zoom-out-flip-vert"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-flip-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-blur"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-blur</textarea>
</div>
</div>
<div class="ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Imagehover.io Responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1273885476291362"
data-ad-slot="7197678738"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="license">
<h3>License</h3>
<p>Imagehover.css is open source, and made available under the <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><br>
</div>
</div>
<div class="footer">
<p>Brought to you by<br><a href="http://www.ciar4n.com/" title="ciar4n.com" target="_blank">ciar4n</a></p>
<small>Copyright © 2016 <a href="http://www.ciar4n.com/" title="ciar4n.com" target="_blank">ciar4n</a></small>
</div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></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-74717651-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>