Post Titles on hover in Home page carrousel

Related with these threads:

http://www.inkthemes.com/community/threads/post-titles-on-home-page.8792/
http://www.inkthemes.com/community/threads/center-post-title-on-home-page-thumbnail-image.8969/

I found this solution:

In front-page.php added this code within <div class="thumbnail"> tag:

HTML:

<div class="thumbnail">             
                  <?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) { ?>
                        <?php inkthemes_get_thumbnail(198, 175); ?>
                    <?php } else { ?>
                        <?php inkthemes_get_image(198, 175); ?>
                        <?php
                    }
                    ?>
              <!--adding post-title as a caption-->
             <div class="caption-title">
             <h6> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> </h6>
                </div>
                  </div>

and then in the styling options in theme options this custom CSS:

Code:

.caption-title {
position:absolute;
bottom:0%;
height:175px;
width: 198px;
background:#000;
filter:alpha(opacity=50);
opacity:0.50;
-moz-opacity:0.50;
visibility:hidden;
}
.caption-title h6 a{
color:#fff;
font-size:18px;
 
}
.caption-title h6{
text-align:center;
}
.thumbnail:hover > div{
visibility:visible;
}

The result can be checked in pinedayturrero.com

What you get with this is that post title only appears in a transparent layer when you move the mouse over the thumbnails on the posts carrousel. I think this is a more elegant solution but as I am not a programmer and my coding knowledge is very limited I am open to any suggestion for improvement