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