title: Javascript to show hidden div overlay with close button on clicks
body: <p>I am after a little help - I'm not a great programmer, and can usually find the answers to my questions with googling, but not this time!</p>
  
  <p>I am trying to produce a specific effect on a webpage, and am struggling to find some basic JS I can modify/tweak to do what I need.</p>
  
  <p>I am going to put a panel of 10 images, in two rows of five, across a webpage. Each image will have a 'Name' above it, and a 'Job Title' below it. When the image is clicked on, I'd like the (relevant) hidden div to display, over the top of all the images - i.e. with the top left corner matching the top left corner of the first image. The div will be a pre-set width.</p>
  
  <p>In the top corner of each div I want a simple close button.</p>
  
  <p>So, what I am trying to produce is code that's scalable - i.e. in theory it shouldn't matter how many images there are as long as I get the structure right, when you click on the image, it 'shows' the correct hidden div.</p>
  
  <p>We already load jQuery on to the webpage, so using that would be no problem.</p>
  
  <p>Any advice/links to snippets/pointers would be appreciated!</p>