Issues with multiply li items being displayed

Issues with multiply li items being displayed

Hello,

I currently have 6 list items, each with their own bit of text. I want it so when you hover one of the A tag images it will display the related text. The issue I am having is all of the related texts are being displayed under every li no matter which one I hover. Now I understand why it is happening, just not how to fix it. I will show you my failed code.

$(function() {
  $('ul#portfolio li a').hover( 
  function(){
 $('ul#portfolio li').find('h4').css('display', 'block');
  },
  function(){
 $('ul#portfolio li').find('h4').css('display', 'none');
  });
});


Now I can't do it with css because the 'li a' is overflow hidden with set width and height and adjusting it ruins my css3 animations. So I have set the related text under the A tag inside the same list like this.

             <li>
                      <a href="#" target="_blank">
                          <img src="jpg" alt="">
                      </a>
                      <h4>TEXT</h4>

                </li>

I hope this is clear what I am trying to attempt, if you need anymore info please let me know and thank you for any replies.

Cheers,
Jake