0

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.

2

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; 
}
  • Since the example image has been added to the question, I now see that this most probably is what was asked for. Anyway, +1. :) – tfrommen 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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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