How to add mouseover text to Wordpress featured image thumbnails?

0
votes

I am using the Wordpress theme "Photos"

It generates thumbnails for posts on the home page using featured images. Thumbnails fade on hover, but no post title is displayed. http://www.hardeepasrani.com/demo/photos/

.photogrid-item img.featured-image:hover {
    opacity: 0.2;
}

I have found numerous wordpress plugins and numerous examples online of how to accomplish thumbnail hover captions, but the wordpress plugins affect the feature images accompanying posts rather than the thumbnails on the home page, and the online examples are simple html/css whereas I believe this theme needs me to put it in the content.php file.

<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
  <a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php if ( has_post_thumbnail() ) : ?>
      <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
      <img class="featured-image" src="<?php echo $feat_image; ?>" />
    <?php else: ?>
      <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
      <img class="featured-image" src="<?php echo $feat_image; ?>" />
    <?php endif; ?>
  </a>
</div>

w3schools has a nice, simple example, but it overlays predefined text ("Hello World") https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

How can I integrate this so that it will display the corresponding post title to every thumbnail?

--------------UPDATE--------------- Using developerme's answer, I got most of the way there. But hovering over any of the thumbnails made the overlays show up for all of the thumbnails. For some reason this was fixed by editing the CSS from

.container:hover .overlay {
  opacity: 1;
}

to:

.overlay:hover {
  opacity: 1;
}

I have no idea why, but that seems to do the trick.

<style>

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.overlay:hover {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
</style>


        <div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
            <a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ) : ?>
                <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <img class="featured-image" src="<?php echo $feat_image; ?>" />
                    <div class="overlay">
                        <div class="text"><?php the_title(); ?></div>
                    </div>
            <?php else: ?>
                <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
                <img class="featured-image" src="<?php echo $feat_image; ?>" />
            <?php endif; ?>
            </a>
        </div>
2
phpwordpressimagehoveroverlay

2 Answers

0
votes

The majority of browsers will display the image title on hover. Assuming that your theme adds the title to the code (the HTML will look something like <img src='image.jpg' title='my great image' />) then all you need to so is go through the images in your media library and make sure that the title field is filled in.

Hope that helps

0
votes
Could You Please try Following code with the css.You change the css with your own needs.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }

    .overlay:hover {
     opacity: 1;
}

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>
    </head>
    <body>

    <div class="container">
    <a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) : ?>
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <img alt="Avatar" class="image"> src="<?php echo $feat_image; ?>" />
    <?php else: ?>
    <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
        <img alt="Avatar" class="image">src="<?php echo $feat_image; ?>" />
    <?php endif; ?>
      <div class="overlay">
        <div class="text"><?php the_title(); ?></div>
      </div>
    </a>
    </div>

    </body>
    </html>