Image Captions on Hover

Question

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/

Solution 1

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>

Solution 2

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.

Solution 3

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.