Hover effect

src/code/index.js

@@ -91,8 +91,26 @@ function createImage(key) {
 const socialLinksContainer = document.getElementById("socialLinks");
 function createSocialLink(key, value) {
     const li = document.createElement("li");
+     // Here this will be a div which will come over the top of the icon and it will show the name of the app 
+     const div = document.createElement("div")
     const img = createImage(key);
+    div.classList.add('div-hover-effect')
+    //^ making the string short if it overflows (based upon its length)
+    if (key.length>8){
+        div.textContent = `${key.substr(0,8)+"..."}`
+    }else{
+        div.textContent = key
+    }
+    li.addEventListener("mouseenter",()=>{
+        img.style.display = 'none'
+        div.style.display = 'flex'
+    })
+    li.addEventListener('mouseleave',()=>{
+        img.style.display = 'block'
+        div.style.display = 'none'
+    })
     img.onload = () => {
+        li.appendChild(div)
         li.appendChild(img);
         li.addEventListener("click", () => {
             navigator.clipboard.writeText(value); // Copy the value to clipboard

src/code/style.css

@@ -183,6 +183,21 @@ p {
     width: 100%;
     height: 100%;
 }
+.div-hover-effect{
+    /* position: absolute;
+    top: 105%; */
+    display: none;
+    justify-content: center;
+    align-items: center;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    font-size: 11px;
+    font-weight: 700;
+    color: white;
+    background-color: transparent;
+    overflow: hidden;
+}
 
 /* ============== Info Panel ============== */