我试图创建一个效果，当你把鼠标悬停在我的缩写名称上时，它会扩展到它的全尺寸，但是，我遇到了一个问题，它会降低我试图实现的网站的视觉吸引力，并使它显得俗气。我想要的是元素以孤立的方式扩展，而不影响网站上的其他任何东西。
以下是链接：https://jsfiddle.net/dkpsgo73/

<nav>
      <header>
        <h1 class="Name">
          [
          <span id="zk-trigger"><span class="Fname"> S</span><span id="hide1" class="hide"><span    class="Fname">eid</span></span>
            J<span id="hide2" class="hide">ama</span>
          </span>
          ]
        </h1>
      </header>
      <!-- Navigational Bar -->
      <div class="nav-menu">
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#Projects">Projects</a></li>
          <li><a href="#Skills">Skills</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
      </div>
      <!-- Navigational Bar -->
    </nav>

我读了很多关于这个主题的不同建议，包括绝对位置和z索引，但我无法找到解决方案，因为我仍然是一个非常新的学习如何编码。