Title on hovering on the featured image

Question

I have used the following code to make a slideshow of the featured image of a category.I want to show the title of the post when hovering on the image. But I don't know how to do it. Anyone please help.

Code in functions.php

register_post_type( 'featured_content' );

add_action( 'init', 'get_the_js' );

function get_the_js() {
wp_register_script( 'jquery.cycle', get_stylesheet_directory_uri(). '/js/jquery.cycle.lite.js', array('jquery'), TRUE);
wp_enqueue_script('jquery.cycle' );
wp_enqueue_script( 'custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery.cycle'), TRUE);
        }

add_image_size( 'featured',  700, 285, true );

Code for displaying slideshow

<div id="home-slider">

    <div class="cycle-nav">
        <a id="prev2" href="#">«Prev</a> <a id="next2" href="#">Next»</a>
    </div>

    <ul id="cycle" class="pics">

        <?php
                    $i = 1;
                    global $wp_query;
                    $custom_query = array('category_name' =>'products',
                        'posts_per_page' => -1
                    );
                    if ( $custom_query )
                        query_posts( $custom_query );
                    $more = 0;
                ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <li class="cycle-item slide-<?php echo $i; ?>">

             <a href="<?php the_permalink();?>"><?php   the_post_thumbnail('featured'); ?></a>
        </li>

        <?php
                    $i++;
                    endwhile;
                    endif;
                ?>
                <?php wp_reset_query(); ?>

    </ul>

</div> <!-- /home-slider -->

Code in custom.js

jQuery.noConflict();
jQuery(document).ready(function($) {
jQuery('ul#cycle').cycle({
        timeout: 9000,
        speed: 1500,
        delay: 2000,
        prev:   '#prev2',
        next:   '#next2'
    });
});

CSS

 #home-slider {
width:735px;
 overflow:hidden;
 height:280px; 
float:right; 
position:relative;
 margin-right:0; 
display:inline-block

}

a#prev2 {
position:absolute; 
width:31px; 
height:32px; 
text-indent:-999em; 
z-index:100; 
background-position:0 0; 
background-image:url(images/cycle-nav.png); 
top:185px; 
box-shadow:1px 1px 2px rgba(2,2,2,0.3); 
-moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
-webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
}

a#prev2:hover {
background-position:0px -32px
}

 a#next2 {
position:absolute; 
right:0px; 
width:31px; 
height:31px; 
display:block; 
z-index:100; 
top:185px; 
background-position:31px 0px; 
background-image:url(images/cycle-nav.png); 
overflow:hidden; 
text-indent:-999em; 
box-shadow:1px 1px 2px rgba(2,2,2,.3);  
-moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
-webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
}

 a#next2:hover {
background-position:31px -32px
}

ul#cycle { 
margin:0;  
padding:0;  
list-style:none
}

ul#cycle .excerpt {
width:700px; 
height:82px;
background: rgb(0, 0, 0); 
background:rgba(0,0,0,.5); 
position:absolute; bottom:0;
padding:10px 20px 10px 25px; 
overflow:hidden
}

Below is the example of what I want

You can see the title of the image on the image. I want the same but the only difference is i need the title when I hover on the image.

Answer 1

Alternative approach:

<li class="cycle-item slide-<?php echo $i; ?>">
   <span class="featured-title"><?php the_title(); ?></span>
   <a href="<?php the_permalink();?>"><?php the_post_thumbnail('featured'); ?></a>
</li>

then hide the span with CSS, show it on hover of the <li> element, position it over the image with CSS.

Example:

li.cycle-item { 
    position: relative; 
}

li.cycle-item .featured-title { 
    display: none; 
}

li.cycle-item:hover .featured-title { 
    display: block;
    position: absolute;
    top: 20%;
    left: 0; 
}