Демо: Подписи к миниатюрам

HTML

<div>
   <ul>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
            <p>Подпись к картинке</p>
				</span></li>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption simple-caption">
					<p>Подпись к картинке</p>
				</span></li>    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>
    <li class="box"><img src="http://placehold.it/100x100">
        <span class="caption">
					<p>Подпись к картинке</p>
				</span></li>
        
  </ul>        
</div>

CSS

body {
  background: #eee;
   font: normal 12px Verdana, Geneva, sans-serif;
	line-height: 1.2em
} 
div {
  max-width: 600px;
  margin: 0 auto; 
} 
ul {
  margin: 0;
  padding: 0;  
  list-style-type: none;
} 

.box{  
  float: left;
  margin: 10px;
  cursor: pointer;
  border: 5px solid #fff;
  width: 100px;
  height: 100px;
  position: relative;
  display: block;  
  overflow: hidden;
}
.caption {
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  height: 100px;
  width: 100px;
  display: block;
  height: 60px;	
  bottom: -60px;
  text-align: center;
}