Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {_x000D_
text-align: center;_x000D_
}_x000D_
a, figure {_x000D_
display: inline-block;_x000D_
}_x000D_
figcaption {_x000D_
margin: 10px 0 0 0;_x000D_
font-variant: small-caps;_x000D_
font-family: Arial;_x000D_
font-weight: bold;_x000D_
color: #bb3333;_x000D_
}_x000D_
figure {_x000D_
padding: 5px;_x000D_
}_x000D_
img:hover {_x000D_
transform: scale(1.1);_x000D_
-ms-transform: scale(1.1);_x000D_
-webkit-transform: scale(1.1);_x000D_
-moz-transform: scale(1.1);_x000D_
-o-transform: scale(1.1);_x000D_
}_x000D_
img {_x000D_
transition: transform 0.2s;_x000D_
-webkit-transition: -webkit-transform 0.2s;_x000D_
-moz-transition: -moz-transform 0.2s;_x000D_
-o-transition: -o-transform 0.2s;_x000D_
}
_x000D_
<div id="container">_x000D_
<a href="#">_x000D_
<figure>_x000D_
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />_x000D_
<figcaption>First image</figcaption>_x000D_
</figure>_x000D_
</a>_x000D_
<a href="#">_x000D_
<figure>_x000D_
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />_x000D_
<figcaption>Second image</figcaption>_x000D_
</figure>_x000D_
</a>_x000D_
</div>
_x000D_