How to Display Image Title Attribute with Mouse Hover on Archive Pages

  • Hello there,

    What is the way to display an image title or a description when a user hovers over an image on the archive pages.

    It does display it on a single post page, but not on archive pages like category or tags.

    I saw some other blogs does have this feature like https://www.pngplay.com/image/tag/hat

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @ehsanhayati,

    Try adding this through Appearance > Customize > Additional CSS:

    
.archive header.entry-header {
    display: none;
}

.archive .post-image:hover + header.entry-header {
    display: block;
}
    Thread Starter ehsanhayati

    (@ehsanhayati)

    This CSS hides the entry header on archive pages, and then shows it again on hover of the post image. This code is not displaying the image title attribute or alt attribute with mouse hover on freatured images of Archive pages.

    Hi there,

    try this PHP Snippet:

    function add_title_tag_to_featured_image($html, $post_id, $post_image_id) {
    $attachment = get_post($post_image_id);
    $title = $attachment->post_title;
    $html = str_replace('<img', '<img title="' . $title . '"', $html);
    return $html;
}
add_filter('post_thumbnail_html', 'add_title_tag_to_featured_image', 10, 3);

    It should add the title attribute to your featured images, which is what the browser creates the tooltip from.

    Thread Starter ehsanhayati

    (@ehsanhayati)

    It worked!

    Awesome

    Thank you

    You’re welcome

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to Display Image Title Attribute with Mouse Hover on Archive Pages’ is closed to new replies.