I'm trying to make an image semitransparent on hover and display text that is otherwise set to `display: none`. Currently if you hover over an image, it becomes semi-transparent (`.single-image:hover` works), but the text doesn't appear. When the text was not set to `display: none`, 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 `.attribution` to 1 but that didn't do anything.

```
<div className="image-container">
    <a href={image.links.html} target="_blank" rel="noopener noreferrer">
       <img className="single-image" src={image.urls.regular} alt="" />
       <p className="attribution">Unsplash</p>
    </a>
 </div>

```

```
    .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;
    }

```