Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

imagehover.css/index.html

Go to file
 
 
Cannot retrieve contributors at this time
618 lines (615 sloc) 30.3 KB
Raw Blame
Open in GitHub Desktop
<!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.min.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">2.0.0</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 2.0.0 - <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 class="demo">
<figure class="imghvr-switch-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-switch-up</textarea>
</div>
<div class="demo">
<figure class="imghvr-switch-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-switch-down</textarea>
</div>
<div class="demo">
<figure class="imghvr-switch-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-switch-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-switch-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-switch-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-in-top-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-pivot-in-top-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-in-top-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-pivot-in-top-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-in-bottom-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-pivot-in-bottom-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-in-bottom-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-pivot-in-bottom-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-out-top-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-pivot-out-top-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-out-top-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-pivot-out-top-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-out-bottom-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-pivot-out-bottom-left</textarea>
</div>
<div class="demo">
<figure class="imghvr-pivot-out-bottom-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-pivot-out-bottom-right</textarea>
</div>
<div class="demo">
<figure class="imghvr-fall-away-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-fall-away-horiz</textarea>
</div>
<div class="demo">
<figure class="imghvr-fall-away-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-fall-away-vert</textarea>
</div>
<div class="demo">
<figure class="imghvr-fall-away-cc"><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-fall-away-cc</textarea>
</div>
<div class="demo">
<figure class="imghvr-fall-away-ccc"><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-fall-away-ccc</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">
<small>Copyright ©&copy;2019 <a href="http://www.ciar4n.com/" title="ciar4n.com" target="_blank">ciar4n</a></small>
<p>Brought to you by<br><a href="http://www.ciar4n.com/" title="ciar4n.com" target="_blank">ciar4n</a></p>
</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>