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

Question

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.

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

Answer 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

Answer 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.

Answer 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?

Answer 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;}