Displaying text when mouseover a list image

I am generating a list of images that scrolls horizontally on a page using: http://ift.tt/2dpALY2

<ul class="images">
    <a href="images/Pumpkins01.png" target="_blank">
    <img src="images/Pumpkins01.png" alt="" width="300" height="400">
</a></li></ul>

When I mouse over each image I need it to display a different body of text in a different div space below the image list. Would it be better to use css and div wrappers to do this? im pretty lost. I have found ways to do this without the use of an unordered list but can not figure it out this way. Any help would be appreciated.

what i have so far.