将鼠标悬停在上方后弹出图像

Question

我有一个图像网格作为我的导航栏;你将鼠标悬停在一个和其他周围的不透明度较低的地方。

我想要发生的是当您将鼠标悬停在其中一个图像上时，它会触发其各自的页面标题显示在整个网格下方。我已经将这些页面标题创建为JPG，但我在CSS中创建此悬停效果时遇到了麻烦。

您可以在此http://jsfiddle.net/arthurcamara/chbsL3pq/上看到Arthur Camara之前为我提供的帮助，除了我需要标题显示在下方，并且在同一个地方，而不是在图像上方。

我对CSS和HTML的了解非常基础，所以当有人告诉我哪里出错时，可以这么做。

HTML：

<div style="position: relative; left: 140px; top: 0px;">
        <img src="window.jpg" style="position: relative; top: 0; left: 0;"/>
    <div id="windowimages">
    <a class="image-one"></a><a href="https://example-site.com/music/">
      <img src="pic1.jpg/>
       <a class="image-two"></a><a href="https://example-site.com/dance/">
      <img 
    src="pic2.jgp"/>
       <a class="image-three"></a><a href="https://example-site.com/art/">
      <img 
    src="pic3.jpg"  />
       <a class="image-four"></a><a href="https://example-site.com/aboutus/">
      <img 
    src="pic4.jpg"/>
         </div>
<div id="pagetitles">
<a class="musicpage"><img src="music1.jpg"/>
<a class="dancepage"><img scr="dance1.jpg"/>
<a class="artpage"><img src="art1.jpg"/>
<a class="aboutuspage"><img src="about1.jpg"/>
</div>

CSS：

body {
}
#windowimages {
  position: absolute;
  left: 3px;
  top: 4px;
  font-size: 0;
  width: 198px;
  margin: 0 auto;
  padding:1px;
  overflow:hidden
}
 #windowimages img {
   width:90px;
  height:90px;
   margin: 3px;
   cursor:pointer;
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
   transition:opacity 2s ease-in-out;  
}

#windowimages:hover img {
  opacity:0.55;
}

#windowimages:hover img:hover {
  opacity:1;
}
.musicpage {
display:none;
}
.image-one:hover + .musicpage {
display:inline;
}