Is there a way to change a target div's text when hovering over other div's using css only?

I'm working with html, css and php to make a row of image divs. I want to be able to hover over the images individually and have their description text display in a separate div (DivB) in the next row below.

This is the basic structure:

<div class="pic1">Display Picture 1 here</div>
  <div class="pic2">Display Picture 2 here</div>
  <div class="pic3">Display Picture 3 here</div>
  <div class="pic4">Display Picture 4 here</div>
<div class="text-info">Description Text for all above div's displayed here on hover of above div's.</div>

In other words:

If I hover over Image 1, image 1's description is shown in DivB.
If I hover over Image 2, image 2's description is shown in DivB.
If I hover over Image 3, image 3's description is shown in DivB.
Etc.

Parameters:

1. How do I do this as a css-only solution?
2. No Jquery.
3. I may have to do this with up to 1,000 images, so minimizing the code without repeating functions (a thousand times), by using something like arrays or loops would be very valuable.

I have a working solution using Jquery and css as a fiddle here: https://jsfiddle.net/70chk8yn/

I've looked up numerous css examples and fiddles, but not found any close enough to this example for me to use.