Make image pop up after hover over

Question

I have a grid of images which is acting as my nav bar; you hover over one and the others around in lower in opacity.

What I want to happen is when you hover over one of these images, it triggers its respective page title to appear underneath the whole grid. I have created these page titles as JPGs, but I'm having trouble creating this hover over effect in CSS.

You can see on this http://jsfiddle.net/arthurcamara/chbsL3pq/ that Arthur Camara created to help me previously, except I need the titles to appear underneath, and in the same one spot, not on top of the images.

My knowledge of CSS and HTML is very basic, so could really do with someone telling me where I'm going wrong please.

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;
}