show build number on hover in branch tiles

app/components/build-tile.js

@@ -6,8 +6,9 @@ export default Ember.Component.extend({
   attributeBindings: ['title'],
 
   title: function() {
-    var num;
+    var num, state;
     num = this.get('build.number');
-    return "#" + num;
+    state = this.get('build.state');
+    return "Build #" + num + " " + state;
   }.property('build')
 });

app/styles/app/components/build-tile.sass

@@ -11,13 +11,6 @@
       .status-icon .circle
         border-color: $white
 
-    @media #{$medium-up}
-      .dropup--status
-        border-color: $extra-hover
-        color: $color
-        &:before
-          background-color: $color
-
 
 .build-tiles
   height: 4.7em
@@ -44,6 +37,7 @@
       height: 2.5rem !important
       margin: auto !important
       background-color: transparent
+      transition: top 200ms ease
       .is-rotating
         position: absolute
         top: 0
@@ -56,6 +50,23 @@
       .circle
         width: 8px
         height: 8px
+    .build-tile-number
+      margin: auto
+      height: 1em
+      width: auto
+      text-align: center
+      position: absolute
+      transform: scale(.7)
+      opacity: 0
+      color: white
+      transition: transform 200ms ease,  opacity 200ms ease
+      top: 0; right: 0; bottom: -1.5em; left: 0
+    &:hover
+      .status-icon
+        top: -1.4em
+      .build-tile-number
+        transform: scale(1)
+        opacity: 1
   a
     display: block
     height: 100%

app/templates/components/build-tile.hbs

@@ -1,10 +1,6 @@
 {{#if build.number}}
   {{#link-to "build" build.id}}
     {{status-icon status=build.state}}
-
-    {{build.last_build.state}}
-{{!--     <div class="dropup--status">
-      {{request-icon event=build.eventType state=build.state}} <span class="label-align">#{{build.number}}</span>
-    </div> --}}
+    <span class="build-tile-number">#{{build.number}}</span>
   {{/link-to}}
 {{/if}}