Image displays text on hover

I have an image, and I style it in CSS. I need the image to display a caption when the cursor hovers over it. However, something like:

#image:hover {
  content:'foo';
}

won't work because the image is not <p>, right? Is there any jQuery solution to this?

Answers 1

  • If you give them a common parent, you can wrap the image with the parent, hide the text, then show the text relative to the parent's position when you hover the parent.

    figure {
      display: inline-block;
      position: relative;
    }
    figcaption {
      opacity: 0;
      transition: opacity .25s, transform .25s;
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) rotate(0);
      color: #fff;
      font-size: 3em;
      background: rgba(0,0,0,0.8);
      padding: 1rem;
    }
    figure:hover figcaption {
      opacity: 1;
      transform: translate(-50%,-50%) rotate(720deg);
    }
    <figure>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
      <figcaption>Text</figcaption>
    </figure>


Related Articles