fancy animation for logo

benogle · Feb 9, 2013 · 72b57e5 · 72b57e5
1 parent 4255247
commit 72b57e5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -3,7 +3,10 @@
 ---
 
 <div id="mark-wrapper">
-  <a href="/" id="mark" title="Check out the homepage"><img src="/images/logo/mark-filled.png"/></a>
+  <a href="/" id="mark">
+    <img src="/images/logo/mark-filled.png"/>
+    <span>ben ogle</span>
+  </a>
 </div>
 
 <div class="wrapper">

diff --git a/css/basics.css b/css/basics.css
@@ -29,22 +29,36 @@ p, ul{
   padding: 20px 0;
   height: 50px;
 }
-#mark{
-  /*position: absolute;
-  top: 20px;
-  left: 20px;*/
-
+a#mark{
   display: block;
   margin: 0 auto;
   width: 40px;
+  height: 47px;
+  line-height: 47px;
+  overflow: hidden;
+  color: #000;
+  text-align: left;
+  text-decoration: none;
+
+  -webkit-transition: width .2s ease-in-out;
+  transition: width .2s ease-in-out;
 }
-#mark img{
+a#mark:hover{
+  width: 130px;
+}
+
+a#mark span{
+  padding-left: 10px;
+}
+
+a#mark img{
+  float: left;
   width: 40px;
   opacity: .2;
   -webkit-transition: opacity .2s ease-in-out;
   transition: opacity .2s ease-in-out;
 }
-#mark:hover img{
+a#mark:hover img{
   opacity: 1;
 }