use helm when hovering on face

public/stylesheets/style.css

@@ -19,4 +19,39 @@ mark.green {
   color: #008000;
   font-weight: bold;
   padding: 0;
+}
+
+.sideface {
+  width: 180px;
+  height: 180px;
+}
+.sideface.Jake0oo0 {
+  background:url("/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=180&default=alex");
+}
+.sideface.Jake0oo0:hover {
+  background:url("/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=180&default=alex&helm");
+}
+.sideface.redstone_sheep {
+  background:url("/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=180&default=alex");
+}
+.sideface.redstone_sheep:hover {
+  background:url("/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=180&default=alex&helm");
+}
+.sideface.Notch {
+  background:url("/avatars/069a79f444e94726a5befca90e38aaf5?size=180&default=alex");
+}
+.sideface.Notch:hover {
+  background:url("/avatars/069a79f444e94726a5befca90e38aaf5?size=180&default=alex&helm");
+}
+.sideface.sk89q {
+  background:url("/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=180&default=alex");
+}
+.sideface.sk89q:hover {
+  background:url("/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=180&default=alex&helm");
+}
+.sideface.md_5 {
+  background:url("/avatars/af74a02d19cb445bb07f6866a861f783?size=180&default=alex");
+}
+.sideface.md_5:hover {
+  background:url("/avatars/af74a02d19cb445bb07f6866a861f783?size=180&default=alex&helm");
 }

views/index.jade

@@ -32,8 +32,8 @@ block content
         p(style="margin-top: 10px;") By default, a 404 text is returned when the avatar was not found. You can change that to the avatar of steve or alex:
         .well <img src="#{domain}/avatars/ae795aa86327408e92ab25c8a59f3ba1/250?default=alex">
       .col-md-2
-        img(src="/avatars/2d5aa9cdaeb049189930461fc9b91cc5?default=alex&helm", title="Jake0oo0")
-        img(src="/avatars/ae795aa86327408e92ab25c8a59f3ba1?default=alex&helm", title="redstone_sheep")
-        img(src="/avatars/069a79f444e94726a5befca90e38aaf5?default=alex&helm", title="Notch")
-        img(src="/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?default=alex&helm", title="sk89q")
-        img(src="/avatars/af74a02d19cb445bb07f6866a861f783?default=alex&helm", title="md_5")
+        .sideface.Jake0oo0(title="Jake0oo0")
+        .sideface.redstone_sheep(title="redstone_sheep")
+        .sideface.Notch(title="Notch")
+        .sideface.sk89q(title="sk89q")
+        .sideface.md_5(title="md_5")