How to display post title & excerpt when mouse hovers on an image?

3 Views

I am bit busy with developing one fashion website, currently (http://test-domain.zakirsajib.co.uk/), where I have images come from posts and when mouse will hover on any image, the corresponding post title and post excerpt will de displayed. Couldn’t make it happen though 🙂

Any clue will be helpful.

Read More

Site is developing in wordpress enviornment, so any php and css (though css parts are done, just need bit help from php part)

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. I think the php you’ll need to put into your template is 

    <?php the_title();?>

    and 

    <?php the_excerpt();?>

    Wrapped up in whatever you are using to do the hover

  2. I have not used Internet Explorer for a long time but I am sure that setting the ‘alt’ will not show as a tool-tip text in non IE browsers. For these browsers you will have to set the ‘title’ attribute.

  3. could you just set it up in the alt and title field for the image?

    img src="whatev" alt="<?php the_title(); ?>: <?php the_excerpt(); ?>" title="same code as alt" />

    Of course this would only work in a WP loop, but I assume we are in a loop if you are displaying images?

  4. you could try this. serves the purpose.

    <div class="post-content">
    <img src="" alt="img" />
    <div class="post-entry">
        <?php the_title();?><br>
        <?php excerpt();?>
    </div>
</div>

    The required CSS

    .post-content {background: #f60;}
    .post-entry {display:none;}
    .post-content:hover .post-entry{display:block;}