Hovering over image and displaying text in another div - html

Question

I'm having trouble with having text appear when hovering over images. Trying to get get an employee page, with the images of employees on the top, and when you hover over the image, the bio displays below.
I've been trying to make this work with just css, but the longer I work on this the more I'm thinking it needs to be done in jQuery. Any help, suggestions or being pointed to an example would be much appreciated.
Here is my example.
jsfiddle
HTML
<div id="ourteam">
<img src="http://d1w5usc88actyi.cloudfront.net/wp-content/uploads/2013/06/1.jpg" id="cat1">
<img src="http://cdn77.eatliver.com/wp-content/uploads/2014/05/funny-glamour16.jpg" id="cat2">
<h3 align="center"> Our Cats</h3>
<div float="left" style="width: 50%;" id="catone">test test test test</div>
<div float="left" style="width: 50%;" id="catone">test test test test</div>
<div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>
<div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>
CSS
#catone {
display:none;
}
#cattwo {
display:none;
}
#cat1:hover #catone {
display:block;
}
#cat2:hover #cattwo {
display:block;
}
img{
height:150px;
width:150px;
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}

Answer 1

Here is a working example. I hope this is what you mean :)
.catone {
display:none;
}
.cattwo {
display:none;
}
#cat1:hover ~ .catone {
display:block;
}
#cat2:hover ~ .cattwo {
display:block;
}
jsfiddle
You make some mistakes... you used one ID for more than one element.
And take a look at CSS3 element1~element2 Selector