Isotope style website help

Hi,

The first square on this website is how I want all the other squares to behave, however whenever I duplicate it, the text displays on closed state - but I want the text to display on open state.

http://creativenorthwest.co.uk/tomo/

Would this be a HTML/CSS issue or Javascript issue?

This is the script behind it

$(function(){
    $('#info-caption').hide(); //by default Content and footer are hidden
   
    $('.hoverInfo').click(function(){
        $('#info-caption').hide(); // once show-1 button clicked the show-header-banner div hide
        $('#info-caption').show(); // once show-1 button clicked the show-Content-footer div appear
    });
   
    $('.closePost').click(function(){
        $('#info-caption').hide(); // once show-2 button clicked the show-Content-footer div hide
        $('#info-caption').hide(); // once show-2 button clicked the show-header-banner div appear
    });
});

Code (markup):