25 - Showing a Play Button for each Image

Author: StephenGrider

imgur-client/sass/image-preview.scss

@@ -1,5 +1,16 @@
 .image-preview {
   display: inline-block;
+  position: relative;
+
+  .glyphicon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 50px;
+    opacity: .5;
+    color: white;
+  }
 
   img {
     height: 200px;

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

@@ -13,6 +13,7 @@ module.exports = React.createClass({
       onMouseLeave={this.handleMouseLeave}
       >
       {this.props.animated && this.state.hovering ? this.video() : this.image()}
+      {this.props.animated && !this.state.hovering ? this.icon() : null }
     </div>
   },
   image: function() {
@@ -27,6 +28,9 @@ module.exports = React.createClass({
       </video>
     </div>
   },
+  icon: function() {
+    return <span className="glyphicon glyphicon-play"></span>
+  },
   handleMouseEnter: function() {
     this.setState({hovering: true});
   },