CODEWITHSUNDEEP
jqueryhtmlcss
Caspar Broekhuizen
Caspar Broekhuizen

Reputation: 111

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?

Upvotes: 1

Views: 33

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 2

Related Questions