Added info about Eager app

css/demo-page.css

@@ -134,6 +134,10 @@ h2 {
   margin-top: 2em;
 }
 
+h3 {
+  margin: 0;
+}
+
 .about {
   border-top: #333 solid 2px;
   border-bottom: #333 solid 2px;
@@ -184,9 +188,59 @@ h2 {
     background: transparent;
 }
 
-.author .logo {
-  display: block;
-  margin-bottom: .8em;
+@-webkit-keyframes circle {
+  50% {
+    -webkit-transform: scale(1.26923077);
+  }
+}
+
+@-webkit-keyframes initials {
+  50% {
+    -webkit-transform: translateY(-8px) translateZ(0);
+  }
+}
+
+@keyframes circle {
+  50% {
+    transform: scale(1.26923077);
+  }
+}
+
+@keyframes initials {
+  50% {
+    transform: translateY(-8px) translateZ(0);
+  }
+}
+
+.ild-ident svg {
+    overflow: visible;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+
+.ild-ident .circle-holder {
+  -webkit-transform: translate(-7px, -7px);
+  transform: translate(-7px, -7px);
+}
+
+.ild-ident .circle {
+  -webkit-transform: translate(7px, 7px);
+  transform: translate(7px, 7px);
+}
+
+.ild-ident svg.active .i {
+  -webkit-animation: initials .4s ease-in-out;
+  animation: initials .4s ease-in-out;
+}
+
+.ild-ident svg.active .l {
+  -webkit-animation: initials .4s .2s ease-in-out;
+  animation: initials .4s .2s ease-in-out;
+}
+
+.ild-ident svg.active .circle {
+  -webkit-animation: circle .5s .1s ease-in-out;
+  animation: circle .5s .1s ease-in-out;
 }
 
 #forkongithub {

index.html

@@ -71,7 +71,7 @@
 
 
 			<h2>Background Transitions</h2>
-  
+
 			<a href="#" class="hvr-fade">Fade</a>
 			<a href="#" class="hvr-back-pulse">Back Pulse</a>
 			<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
@@ -188,15 +188,35 @@
 
 				<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>
 
+				<br />
 				<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>
+
+				<br />
+				<img src="eager.jpg" alt="Eager App" />
+				<h3>Hover.css is now available as an Eager App</h3>
+				<p>Quickly and easily install <a href="https://eager.io/app/AN_LdP2tOk0f">Hover.css</a> on your WordPress site or via an embed code with <a href="https://eager.io/">Eager app</a>.</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>
+
+				<div class="ild-ident">
+
+					<!-- "IL" logo Copyright (c) Ian Lunn Design Limited 2015 -->
+					<a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">
+
+						<svg onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
+							<g class="circle-holder">
+								<path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"/>
+							</g>
+							<path class="i" fill="#2E96D6" d="M15 22h9v16h-9v-16z"/>
+							<path class="l" fill="#2E96D6" d="M28 14h9v24h-9v-24z"/>
+						</svg>
+					</a>
+				</div>
 
 				<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 /> relating 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>