title: Display text overlay and apply image transparency on hover
body: <p>I'm trying to make an image semitransparent on hover and display text that is otherwise set to <code>display: none</code>. Currently if you hover over an image, it becomes semi-transparent (<code>.single-image:hover</code> works), but the text doesn't appear. When the text was not set to <code>display: none</code>, it is positioned over the image in the bottom left-hand corner. I thought that since it is over the image, the hover pseudo-class would take effect. I also tried setting the z-index of <code>.attribution</code> to 1 but that didn't do anything.</p>
  
  <pre><code>&lt;div className="image-container"&gt;
      &lt;a href={image.links.html} target="_blank" rel="noopener noreferrer"&gt;
         &lt;img className="single-image" src={image.urls.regular} alt="" /&gt;
         &lt;p className="attribution"&gt;Unsplash&lt;/p&gt;
      &lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>    .image-container {
        display: inline-block;
        position: relative;
      }
  
      /* Text */
      .attribution {
        display: none;
        color: white;
        position: absolute;
        bottom: 20px;
        left: 20px;
      }
  
      .attribution:hover {
        display: block;
      }
  
      .single-image {
        margin: 7px;
        height: 350px;
        width: 350px;
        object-fit: cover;
      }
  
      .single-image:hover {
        opacity: 0.7;
        transition: 0.5s;
      }
  </code></pre>