Enhance CSS: magnetic menu hover text, home grid captions, responsive improvements

assets/css/templates/home.css

@@ -10,7 +10,6 @@
   position: relative;
   --cols: 1;
   --rows: 1;
-
   overflow: hidden;
   background: #000;
   line-height: 0;
@@ -55,9 +54,15 @@
   left: 0;
   line-height: 1;
   text-align: center;
-  background: rgba(0,0,0, .5);
+  background: rgba(0,0,0, .7);
+  opacity: 0;
+  transition: opacity .3s;
+}
+.home-grid li:hover figcaption {
+  opacity: 1;
 }
 
+/* Medium screens */
 @media screen and (min-width: 45em) {
   .home-grid {
     grid-template-columns: repeat(3, 1fr);
@@ -69,4 +74,4 @@
   .home-grid a {
     padding-bottom: 52.65%;
   }
-}
+}