title: How to add mouseover text to Wordpress featured image thumbnails?
body: <p>I am using the Wordpress theme "Photos"</p>
  
  <p>It generates thumbnails for posts on the home page using featured images. Thumbnails fade on hover, but no post title is displayed. <a href="http://www.hardeepasrani.com/demo/photos/" rel="nofollow noreferrer">http://www.hardeepasrani.com/demo/photos/</a></p>
  
  <pre><code>.photogrid-item img.featured-image:hover {
      opacity: 0.2;
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('photogrid-item'); ?&gt;&gt;
    &lt;a class="photogrid-link" href="&lt;?php the_permalink(); ?&gt;" title="&lt;?php the_title(); ?&gt;"&gt;
      &lt;?php if ( has_post_thumbnail() ) : ?&gt;
        &lt;?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post-&gt;ID) ); ?&gt;
        &lt;img class="featured-image" src="&lt;?php echo $feat_image; ?&gt;" /&gt;
      &lt;?php else: ?&gt;
        &lt;?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?&gt;
        &lt;img class="featured-image" src="&lt;?php echo $feat_image; ?&gt;" /&gt;
      &lt;?php endif; ?&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>w3schools has a nice, simple example, but it overlays predefined text ("Hello World") <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;img src="img_avatar.png" alt="Avatar" class="image"&gt;
    &lt;div class="overlay"&gt;
      &lt;div class="text"&gt;Hello World&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I integrate this so that it will display the corresponding post title to every thumbnail?</p>
  
  <p>--------------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</p>
  
  <pre><code>.container:hover .overlay {
    opacity: 1;
  }
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>.overlay:hover {
    opacity: 1;
  }
  </code></pre>
  
  <p>I have no idea why, but that seems to do the trick.</p>
  
  <pre><code>&lt;style&gt;
  
  .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;
  }
  &lt;/style&gt;
  
  
          &lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('photogrid-item'); ?&gt;&gt;
              &lt;a class="photogrid-link" href="&lt;?php the_permalink(); ?&gt;" title="&lt;?php the_title(); ?&gt;"&gt;
              &lt;?php if ( has_post_thumbnail() ) : ?&gt;
                  &lt;?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post-&gt;ID) ); ?&gt;
                  &lt;img class="featured-image" src="&lt;?php echo $feat_image; ?&gt;" /&gt;
                      &lt;div class="overlay"&gt;
                          &lt;div class="text"&gt;&lt;?php the_title(); ?&gt;&lt;/div&gt;
                      &lt;/div&gt;
              &lt;?php else: ?&gt;
                  &lt;?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?&gt;
                  &lt;img class="featured-image" src="&lt;?php echo $feat_image; ?&gt;" /&gt;
              &lt;?php endif; ?&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>