hover fix

Author: AJIXuMuK

src/controls/carousel/Carousel.module.scss

@@ -7,6 +7,51 @@
   .contentContainer {
     flex-grow: 2;
     position: relative;
+
+    .carouselImage {
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.staticDetails {
+        .details {
+          top: 60%;
+        }
+      }
+
+      .details {
+        background-color: rgba(0, 0, 0, 0.8);
+        box-sizing: border-box;
+        color: white;
+        height: 40%;
+        left: 0;
+        padding: 15px;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transition: all 0.5s ease;
+
+        .title {
+          display: block;
+          @include ms-fontSize-l;
+          padding-bottom: 5px;
+        }
+      }
+    }
+
+    &:hover {
+      .carouselImage.dynamicDetails {
+        .details {
+          top: 60%;
+        }
+      }
+    }
   }
 
   .indicators {
@@ -82,7 +127,6 @@
     flex-direction: column-reverse;
   }
 
-
   // ButtonContainer display mode
   .buttonsOnlyPrevButton {
     position: absolute;

src/controls/carousel/CarouselImage.module.scss

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from './CarouselImage.module.scss';
+import styles from './Carousel.module.scss';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { css } from 'office-ui-fabric-react/lib/Utilities';