Image displays text on hover

Question

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?

Answer 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>