Make the text overlay in CSS instead

Unicorns-Creations · Dec 18, 2021 · 38b21af · 38b21af
1 parent 7c805ec
commit 38b21af
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/src/Menu.html b/src/Menu.html
@@ -13,8 +13,11 @@
   <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
   <link rel="stylesheet" href="controlbox.css">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+    crossorigin="anonymous"></script>
   <script src="controlbox.ui.js"></script>
 
 </head>
@@ -29,13 +32,29 @@
     <h1>MonoLauncher's Menu</h1>
     <p>List of tools & features to better your experience!</p>
     <div class="toolscontainer">
-      <a href="dev.html"><img src="https://i.postimg.cc/ZRkktHxN/image.png" alt="Dev"></a>
-      <a href="imessage.html"><img src="https://i.postimg.cc/k4G1BbMc/image.png" alt="iMessage"></a>
-      <a onclick="MPDC()"><img src="https://i.postimg.cc/1zw6MRCQ/image.png" alt="MPD Police Calculator"></a>  
-      <a onclick="FTW1()"><img src="https://i.postimg.cc/RF8BF9mW/20211218135305-1.jpg" alt="..."></a>
+      <div id="devContainer">
+        <a href="dev.html"><img src="https://i.postimg.cc/ZRkktHxN/image.png" alt="Dev">
+          <div class="imageOverlayText">Dev Information</div>
+        </a>
+      </div>
+      <div id="iMessageContainer">
+        <a href="imessage.html"><img src="https://i.postimg.cc/k4G1BbMc/image.png" alt="iMessage">
+          <div class="imageOverlayText">MonoPhone - Messages</div>
+        </a>
+      </div>
+      <div id="policeContainer">
+        <a onclick="MPDC()"><img src="https://i.postimg.cc/1zw6MRCQ/image.png" alt="MPD Police Calculator">
+          <div class="imageOverlayText">Police Calculator</div>
+        </a>
+      </div>
+      <div id="craftContainer">
+        <a onclick="FTW1()"><img src="https://i.postimg.cc/RF8BF9mW/20211218135305-1.jpg" alt="...">
+          <div class="imageOverlayText">Crafting Calculator</div>
+        </a>
+      </div>
     </div>
   </div>
-   
+
   <script src="header.ui.js"></script>
 </body>
 

diff --git a/src/MenuB.css b/src/MenuB.css
@@ -12,20 +12,40 @@
   }
 
   .toolscontainer {
-    min-height: 260px;
-    max-height: 515px;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
-  .toolscontainer > a > img {
+  .toolscontainer>div>a>img {
+    display: block;
     width: 400px;
-    transition-duration: 250ms;
     cursor: pointer;
     margin: 1rem;
     border-radius: .25rem;
+  }
+
+  .toolscontainer>div {
+    transition-duration: 250ms;
+    position: relative;
     filter: brightness(80%);
   }
 
-  .toolscontainer > a > img:hover {
+  .toolscontainer>div:hover {
+    position: relative;
     filter: brightness(100%);
+  }
+
+  .imageOverlayText {
+    color: rgb(201, 201, 201);
+    font-size: 22px;
+    line-height: 1.5em;
+    text-shadow: 2px 2px 2px #000;
+    text-align: left;
+    position: absolute;
+    top: 85%;
+    left: 56%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    z-index: 5;
   }