rollover over image, different image appears below - css

Question

I'm trying to make a grid of images that once you hover over one, it's webpage title appears below it, as well as the other images around it changing in opacity.
I have managed to create the opacity mouseover effect I want, but now I'm having trouble making the page heading images appear as you hover over the corresponding image. I hope that makes sense
Hope someone can help. Here is my code
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>
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;
}

Answer 1

If I understood you correctly, it seems like what you want to do is add a title to each image on hover.
Check out this example I wrote: http://jsfiddle.net/arthurcamara/chbsL3pq/
The key part to adding the title was .image:hover:after as you can see above and in the code below:
.grid:hover .image:hover:after {
display: block;
position: absolute;
top: 5px;
width: 90px;
padding: 5px;
content: attr(data-title);
text-align: center;
background-color: #333;
color: #fff;
}
I changed your markup a bit as well to make it more semantic. Check out the example and let me know if that helped :)