Editing Fancy Link Gallery for Hover Text Effect

Permalink
This would be my first site I will be deploying to a client of mine, but before I am done I am attempting to use 'Fancy Link Gallery' for the goal of achieving the following effect:

http://tympanus.net/Tutorials/OriginalHoverEffects/index.html...

Challenge
I want to use Demo 1's effect, but the challenge I am having is use the ability to attach with each image a editable paragraph element that acts as the text shown in the example. I would have a set amount of characters.

Currently, these are my edits.

controller.php
//Biography
            if($link_method == 'biography'){
$html = $img .'<div class='.'"mask"'.'>'.'<p>' . $biography . '</p></div>';
}


controller.php after function save($data)
// Edited for In-Flight
            $args['biography'] = isset($data['biography']) ? $data['biography'] : '';


edit.php
<!-- Start Edited -->
    <div id="biography" class="option">
       <tr>
         <td valign="top"><?php    echo $form->label('biography', 'Biography:'); ?></td>
         <td valign="top"><?php    echo $form->textarea('biography', $biography, array('style' => 'width: 300px')); ?></td>
      </tr>
    </div>
    <!-- Edited Ended -->


db.xml
<field name="biography" type="C" size="300"></field>


Output
<div id="blockStyle162PersonsBio22" class="mask ccm-block-styles">
<img border="0" class="view-first view" alt="" src="/files/2413/7098/7461/DSC_5823.JPG" width="2240" height="1488">
<div class="mask">
<p>*BIOGRAOHY IS SO POST TO BE HERE...?*</p>
</div>


My problem is that within my biography field, the text doesn't save. Thus why there's no text output between the 'p' elements. Why?
I ask that if Concrete5's community can give me an idea of how to make this hover effect complete per image while also being editable by the end user.

albeda