CODEWITHSUNDEEP
htmlcsscaptions
LemonMan
LemonMan

Reputation: 3143

Image Captions on Hover

I'm trying to implement a feature for my website where hovering over an image shows its caption over the bottom of the image. Any tips on how to do this? I was trying to do it, but something in the css template I'm using was interfering.

Here are the images I want to put captions for

<section class="5grid is-gallery">
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/MicroChess.html" class="image image-full"><img src="images/1a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/ClusteringDistance.html" class="image image-full"><img src="images/2a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/FourInARow.html" class="image image-full"><img src="images/3a.jpg" alt=""></a>

        </div>
    </div>
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/Fidelity.html" class="image image-full"><img src="images/4a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/Concordance.html" class="image image-full"><img src="images/5a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/PhotoShare.html" class="image image-full"><img src="images/6a.png" alt=""></a>

        </div>
    </div>
</section>

Note: I tried to use these, not exactly sure what I was doing wrong. http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

Upvotes: 3

Views: 19034

Answers (3)

pzin
pzin

Reputation: 4248

The code to achieve this would be something like this:

a {
  position: relative
}

a span {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.8);
}

a:hover span {
  display: block
}
<a>
  <img src="http://placehold.it/300x200">
  <span>caption</span>
</a>

Upvotes: 9

pzin
pzin

Reputation: 4248

You could use also CSS attr().

a {
  position: relative;
}

a:hover:after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  z-index: 999;
  background: #ccc;
  color: black;
  padding: 5px;
}

Could also use another attribute, like alt.

Upvotes: 1

Alex Shesterov
Alex Shesterov

Reputation: 27525

If JavaScript+jQuery is acceptable, try jQuery TipTip plugin: http://code.drewwilson.com/entry/tiptip-jquery-plugin

TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.

Upvotes: 1

Related Questions