On hover, show what's before and what's after

I asked my team about how they would make happo diffs better. One
interesting suggestion was to include a label for which image is the
before and after. It's easy to forget which one is the old and new one I
guess.

I'm making the label appear on hover only. It's located in the lower
right corner.

lib/happo/public/HappoDiffs.jsx

@@ -178,14 +178,43 @@ Swiper.propTypes = {
   current: PropTypes.string.isRequired,
 };
 
+function SideBySide({ previous, current }) {
+  return (
+    <div className='SideBySide'>
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={previous}
+        />
+        <div className='SideBySide__caption'>
+          Before
+        </div>
+      </div>
+      {' '}
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={current}
+        />
+        <div className='SideBySide__caption'>
+          After
+        </div>
+      </div>
+    </div>
+  );
+}
+SideBySide.propTypes = {
+  previous: PropTypes.string.isRequired,
+  current: PropTypes.string.isRequired,
+};
+
 function SelectedView({ image, selectedView }) {
   if (selectedView === VIEWS.SIDE_BY_SIDE) {
     return (
-      <div>
-        <img role='presentation' src={image.previous} />
-        {' '}
-        <img role='presentation' src={image.current} />
-      </div>
+      <SideBySide
+        previous={image.previous}
+        current={image.current}
+      />
     );
   }
 

lib/happo/public/happo-styles.css

@@ -107,3 +107,26 @@ body {
 .Swiper__image {
   pointer-events: none;
 }
+
+.SideBySide__image {
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+}
+
+.SideBySide__caption {
+  background-color: #666666;
+  bottom: 0;
+  color: #ffffff;
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0;
+  padding: 3px 6px;
+  position: absolute;
+  right: 0;
+  transition: opacity .2s;
+}
+
+.SideBySide__image:hover .SideBySide__caption {
+  opacity: 1;
+}