Text Underline when Hover over Image

Text Underline when Hover over Image

I'm slowly understanding php but need some help please. I would like the
h1 tag in the .rel to underline, when you hover over the post thumbnail.
Could someone point me in the right direction please?
I found: hover image and text change BUT NO ANSWER. Underlining in
Javascript? but not sure how the jquery works in my case?
http://www.kirupa.com/forum/showthread.php?295704-Change-text-hover-when-hovering-over-an-image
but the a href is wrapped around the image and text.
I've read about mouseOver and mouseOut functions but unfamiliar with these!
My code in php:
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<div class="rel">
<h1><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></h1>
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('homepage-thumb', array('alt' => '',
'title' => '')) ?></a>
<?php if ($mulderamanda_theme_options['images_only'] == 0): ?>
<?php endif ?>
<div class="texts">
<?php if ($mulderamanda_theme_options['images_only'] == 1): ?>
<a class="transparent" href="<?php the_permalink();
?>"><?php the_post_thumbnail('homepage-thumb', array('alt'
=> '', 'title' => '')) ?></a>
<?php endif ?>
<div class="abs">
<?php if ($mulderamanda_theme_options['images_only'] == 0): ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></h1>
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('homepage-thumb', array('alt' => '',
'title' => '')) ?></a>
<?php endif ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>