在悬停另一个元素时转换锚文本

Question

当鼠标悬停在徽标上时，我试图让我的锚标签中的文本转换。我在徽标上有一个转换，我希望为锚文本匹配，但文本永远不会转换。锚文本可见性最初设置为隐藏，应该慢慢显示。这可以单独用css完成，还是需要使用JavaScript或jquery？

谢谢！

fiddle

<div class="row container">
  <div id="visible">

  <div class="small-4 small-centered medium-3 medium-centered large-2 large-centered columns">
    <div class="circle-logo">
      <a href="#">dp</a>
    </div>
  </div>


<div id="hidden" class="small-8 small-centered medium-9 medium-centered large-10 large-centered columns">
    <ul class="button-group even-4 sans">
      <li><a href="blog.html" class="small button secondary">Blog</a></li>
      <li><a href="#" class="small button secondary">Projects</a></li>
      <li><a href="#" class="small button secondary">Resume</a></li>
      <li><a href="#" class="small button secondary">Contact</a></li>
    </ul>
  </div>
  </div>
</div>


.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.container a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle-logo {
width: 10em;
height: 10em;
border: 0.8em double;
border-radius: 6em;
z-index: 0;
-webkit-box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo a {
font-size: 7em;
color: #000000;
text-align: center;
line-height: 0.98;
font-family: Baumans, cursive;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo:hover {
z-index: 1000;
color: #FFFFFF;
background-color: #403E3E;
text-decoration: none;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo:hover a {
color: #FFFFFF;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.button.secondary {
background-color: #868686;
}
.button-group.even-4 li a {
border-left: none;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
#visible {
opacity: 1;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
#visible:hover {
  #hidden {
    opacity:1;
    transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
  }
}