One of the nicer effects I used on TheSkinDrop.com, a gallery site of a sort, was the mouseover labels on the thumbnails. While this wasn't achieved using Textimage, it should have been, and likely will be when I have the time to perform an upgrade.

Here I will demonstrate how to achieve that effect using Textimage, firstly on a standalone item, then integrated with a Views grid display.

Notes:

• This is written with the assumption that you have Drupal, Textimage and Views 2 (optional) installed and setup and have reasonable knowledge in using them.
• Drupal 6 with clean-urls enabled was used in writing this. As Views 2 is only available for Drupal 6, the Views section can only be done on a Drupal 6 site, however the concept can be adapted to anything given enough knowledge.

Step 1 - Create your Textimage preset

1. Create a new Textimage preset (http://www.yoursite.com/admin/settings/textimage/preset/new) to be used as the label, below are the settings I used:

   Name: label
   Description: Label for mouseover.

   Font: Arial Black
   Font Size: 10
   Text Color: #FFFFFF
   Maximum width: 121
   Fixed width: [checked]
   Text Align: Center
   Text Rotation: 0
   Convert to case: Default
   Outline Width: [empty]
   Outline Color: [empty]
   Text Margin Top: 2
   Text Margin Right: 2
   Text Margin Bottom: 2
   Text Margin Left: 2

   Background Color: #000000
   Background Type: [Default (use background color)]
   Text X-Offset: 0
   Text Y-Offset: 0

2. If everything is setup correctly you should see an image similar to the one below by invoking the Textimage (ie. http://www.yoursite.com/sites/default/files/textimage/label/Text.png).

   

Step 2 - Implement on standalone node.

1. Insert the following HTML, CSS and JS into a node, making sure you have Full HTML selected for the Input format:

   <style>
     .item
     {
       background-color: #EEE;
       display: block;
       height: 125px;
       overflow: hidden;
       position: relative;
       width: 125px;
     }

     .item .label
     {
       -khtml-opacity: 0.5;
       -moz-opacity: 0.5;
       bottom: 0;
       display: block;
       filter: alpha(opacity=50);
       height: 15px;
       opacity: 0.5;
       position: absolute;
       width: 125px;
   }
   </style>
   <div class="item">
     <img src="/sites/default/files/textimage/label/Text.png" alt="Text" class="label" />
   </div>
   <script>
     // Set default status
     $('.item .label').css('display', 'block')
     $('.item .label').hide();

     // Bind hover behavior
     $('.item').hover(function() {
       $(this).find('.label').fadeIn('fast');
     }, function() {
       $(this).find('.label').fadeOut('fast');
     });
   </script>

2. Once you have saved the node you should see something similar to this:
   
   

   Move your mouse over and then out of the box to see the label appear and disappear.

Note: If you aren't using Drupal 6 or don't have CCK and Views installed this is the end of this guide for you, however I suggest reading on to see what could be.

Step 3 - Create some test content.

1. Create a new Content type (http://www.yoursite.com/admin/content/types/add) for use as the Views items, below are the settings I used:

   Name: Item
   Type: item

2. Enter the Manage fields page for your new Content type (ie. http://www.yoursite.com/admin/content/node-type/item/fields) and create a new Text field, below are the settings I used:

   Label: Label
   Field name: label
   Data type: Text
   Field type: Text field

3. Save the new field with the default settings.
4. Create a new node of your new Content type (ie. http://www.yoursite.com/node/add/item).
5. Enter anything you wish as the Title of the node and the value you wish for the label in your new Text field.
6. Save the new node.
7. Repeat 4 - 6 until you have 8 nodes.

Step 4 - Create the View.

1. Create a new View (http://www.yoursite.com/admin/build/views/add), enter a name of your choice (ie. Items) and hit the 'Next' button.
2. Add a 'Page' display to the view.
3. Under 'Basic settings', set 'Style' to 'Grid' using the default settings.
4. Under 'Page settings', set 'Path' to a path of your choice (ie. items).
5. Click the '+' button in the 'Fields' section, check the box next to your new Text field (ie. Content: Lable (field_label) and hit the 'Add' button.
6. In the field settings section, select 'None' for Label and your Textimage preset (ie. Textimage: Label) for Format, then hit the 'Update default display' button.
7. Click the '+' button in the 'Filters' section, check the box next 'Node: type' and hit the 'Add' button.
8. In the filter settings section, check the box next to your Content type (ie. Item), then hit the 'Update default display' button.
9. Enter the following CSS and JS in the Header, making sure you have Full HTML selected for the Input format:

   <style>
     .field-content
     {
       background-color: #EEE;
       display: block;
       height: 125px;
       overflow: hidden;
       position: relative;
       width: 125px;
     }

     .field-content IMG
     {
       -khtml-opacity: 0.5;
       -moz-opacity: 0.5;
       bottom: 0;
       display: block;
       filter: alpha(opacity=50);
       height: 15px;
       opacity: 0.5;
       position: absolute;
       width: 125px;
   }
   </style>
   <script>
     $(document).ready(function() {
       // Set default status
       $('.field-content IMG').css('display', 'block')
       $('.field-content IMG').hide();

       // Bind hover behavior
       $('.field-content').hover(function() {
         $(this).find('IMG').fadeIn('fast');
       }, function() {
         $(this).find('IMG').fadeOut('fast');
       })
     });
   </script>

10. Save your View.
11. Visit your Views page (ie. http://www.yoursite.com/items) and you should see something similar to that below:
    

For more information about Textimage or to download the latest version, checkout the project page: http://drupal.org/project/textimage