Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 enter image description here

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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; 
}
share|improve this answer
    
Since the example image has been added to the question, I now see that this most probably is what was asked for. Anyway, +1. :) –  t f Apr 24 '13 at 11:51
    
I made a small change in the css and it worked perfectly –  MidhuN Apr 24 '13 at 12:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.