text on hover

davenarchives · Dec 19, 2024 · 0bcde9a · 0bcde9a
1 parent 1c1fc37
commit 0bcde9a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -70,66 +70,77 @@ <h3>Easy to Access</h3>
         <div class="box">
             <a href="languages/python.html">
                 <img src="images/python-logo.png" alt="python">
+                <span class="hover-text">Python</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/java.html">
                 <img src="images/java-logo-1.png" alt="java">
+                <span class="hover-text">Java</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/c.html">
                 <img src="images/C_Logo.png" alt="c">
+                <span class="hover-text">C</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/html.html">
                 <img src="images/HTML5_logo_and_wordmark.svg.png" alt="html">
+                <span class="hover-text">HTML</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/css.html">
                 <img src="images/css-logo.png" alt="css">
+                <span class="hover-text">CSS</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/javascript.html">
                 <img src="images/javascript.png" alt="javascript">
+                <span class="hover-text">JavaScript</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/cpp.html">
                 <img src="images/C++_logo.png" alt="c++">
+                <span class="hover-text">C++</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/cs.html">
                 <img src="images/Logo_C_sharp.svg.png" alt="c#">
+                <span class="hover-text">C#</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/php.html">
                 <img src="images/php.png" alt="php">
+                <span class="hover-text">PHP</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/ruby.html">
                 <img src="images/Ruby_logo.png" alt="ruby">
+                <span class="hover-text">Ruby</span>
             </a>
         </div>
 
         <div class="box">
             <a href="languages/markdown.html">
                 <img src="images/markdown-icon.webp" alt="markdown">
+                <span class="hover-text">Markdown</span>
             </a>
         </div>
 
@@ -142,23 +153,27 @@ <h3>Easy to Access</h3>
         <div class="box">
             <a href="frameworks/react.html">
                 <img src="images/React-icon.svg.png" alt="react">
+                <span class="hover-text">React</span>
             </a>
         </div>
 
         <div class="box">
             <a href="frameworks/angular.html">
                 <img src="images/Angular_full_color_logo.svg.png" alt="angular">
+                <span class="hover-text">Angular</span>
             </a>
 
         </div>
         <div class="box">
             <a href="frameworks/vue.html">
                 <img src="images/Vue.js_Logo_2.svg.png" alt="vue">
+                <span class="hover-text">Vue</span>
             </a>
         </div>
         <div class="box">
             <a href="frameworks/bootstrap.html">
                 <img src="images/Bootstrap_logo.svg.png" alt="bootstrap">
+                <span class="hover-text">Bootstrap</span>
             </a>
         </div>
 
@@ -171,21 +186,25 @@ <h3>Easy to Access</h3>
         <div class="box">
             <a href="databases/dbms.html">
                 <img src="images/dbms.png" alt="dbms">
+                <span class="hover-text">DBMS</span>
             </a>
         </div>
         <div class="box">
             <a href="databases/sql.html">
                 <img src="images/sql-logo.png" alt="sql">
+                <span class="hover-text">SQL</span>
             </a>
         </div>
         <div class="box">
             <a href="databases/postgre.html">
                 <img src="images/postgre.png" alt="postgresql">
+                <span class="hover-text">PostgreSQL</span>
             </a>
         </div>
         <div class="box">
             <a href="databases/mongodb.html">
                 <img src="images/mongoDB.png" alt="mongodb">
+                <span class="hover-text">MongoDB</span>
             </a>
         </div>
 
@@ -198,11 +217,13 @@ <h3>Easy to Access</h3>
         <div class="box">
             <a href="devops/git.html">
                 <img src="images/Git-Icon-1788C.png" alt="git">
+                <span class="hover-text">Git</span>
             </a>
         </div>
         <div class="box">
             <a href="devops/docker.html">
                 <img src="images/Docker_logo_logos-512.webp" alt="docker">
+                <span class="hover-text">Docker</span>
             </a>
         </div>
         <!--------------------------------------------------------------------------------------------------------->
@@ -214,11 +235,13 @@ <h3>Easy to Access</h3>
         <div class="box">
             <a href="resources/pdf.html">
                 <img src="images/pdf.png" alt="pdf">
+                <span class="hover-text">Resources</span>
             </a>
         </div>
         <div class="box">
             <a href="resources/cheatsheet.html">
                 <img src="images/CheatSheet_30187.png" alt="cheatsheet">
+                <span class="hover-text">Misc</span>
             </a>
         </div>
 

diff --git a/style.css b/style.css
@@ -287,10 +287,31 @@ html {
     border-color: #00bcd4;
 }
 
+.box .hover-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  font-size: 24px;
+  font-weight: bold;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.box:hover .hover-text {
+  opacity: 1;
+}
+
 .box img {
     height: 100px; 
     max-width: 100%; 
     object-fit: contain; 
+    transition: all 0.3 ease;
+}
+
+.box:hover img {
+  filter: blur(3px);
 }
 
 /* -----------------------------------Categories Divider-------------------------------------------*/