Smooth transitions and styling for additions and deletions

OurUmbraco.Client/src/scss/sections/_contributors.scss

@@ -32,8 +32,7 @@
     }
 }
 
-.github-contributors small.link-list
-{
+.github-contributors small.link-list {
     font-style: italic;
     font-weight: normal;
     text-transform: none;
@@ -59,6 +58,27 @@
         }
     }
 
+    .counts {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        right: 2px;
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+        line-height: 12px;
+        background: rgba(0,0,0,0.25);
+        border-radius: 50%;
+        bottom: 6px;
+        padding-top: 23px;
+        opacity: 0;
+        transition: opacity 0.25s;
+    }
+
+    &:hover .counts {
+        opacity: 1;
+    }
+
     .contrib-count {
         position: absolute;
         left: 25px;
@@ -69,5 +89,6 @@
         font-weight: bold;
         background: darken($color-our, 4%);
         border-radius: 15px;
+        z-index: 5;
     }
 }

OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml

@@ -11,9 +11,12 @@
                 <div class="avatar">
                     <img alt="@author.Login" src="@author.AvatarUrl&s=112" title="@author.Login" />
                     <span class="contrib-count" title="@(contributor.TotalCommits + " contributions")">@contributor.TotalCommits</span>
-                    <div>
-                        Additions: @contributor.TotalAdditions
-                        <br />Deletions: @contributor.TotalDeletions
+                    <div class="counts">
+                        Additions<br />
+                        <strong>@contributor.TotalAdditions</strong><br />
+                        <br />
+                        Deletions<br />
+                        <strong>@contributor.TotalDeletions</strong>
                     </div>
                 </div>
             </a>