[AFP-47 Shaphen Pangburn]: Add more details styling without functionality

ecom-web/src/components/product-market/product-market.jsx

@@ -39,9 +39,11 @@ export default class ProductMarket extends Component {
               <div className="product-item-container" key={ prod.sku }>
                 { prod.productName ?
                   <div className="product-item">
-                    <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
+                    <div id="more-details-img-box">
+                      <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
+                      <p id="more-details-text">More Details</p>
+                    </div>
                     <p id="prod-name">{ prod.productName }</p>
-                    {/* <p id="prod-description">{ prod.productDescription }</p> */}
                     <p id="prod-price">
                       { prod.promo ? 
                         <div id="promo-show">

ecom-web/src/resources/stylesheets/product-market.css

@@ -45,6 +45,35 @@
 
 #prod-img {
     height: 200px;
+    transition: all 0.3s;
+}
+
+#more-details-img-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s;
+}
+
+#more-details-img-box:hover {
+    cursor: pointer;
+}
+
+#more-details-img-box:hover #prod-img {
+    opacity: 50%;
+}
+
+#more-details-text {
+    display: none;
+    position: absolute;
+    top: 80px;
+    font-size: 35px;
+    transition: all 1s;
+}
+
+#more-details-img-box:hover #more-details-text {
+    display: block;
 }
 
 #prod-name,