Flux - 26 - Adding an Image Stats Overlay

Author: StephenGrider

imgur-client/sass/image-preview.scss

@@ -2,6 +2,16 @@
   display: inline-block;
   position: relative;
 
+  .inset {
+    position: absolute;
+    bottom: 5px;
+    left: 0px;
+    width: 100%;
+    background-color: white;
+    text-align: center;
+    opacity: .7;
+  }
+
   .glyphicon {
     position: absolute;
     top: 50%;

imgur-client/src/components/image-preview.jsx

@@ -14,6 +14,14 @@ module.exports = React.createClass({
       >
       {this.props.animated && this.state.hovering ? this.video() : this.image()}
       {this.props.animated && !this.state.hovering ? this.icon() : null }
+      {this.state.hovering ? this.inset() : null}
+    </div>
+  },
+  inset: function() {
+    return <div className="inset">
+      Views: {this.props.views}
+      <br />
+      Upvotes: {this.props.ups}
     </div>
   },
   image: function() {