Simple Gallery

<div class="container">

  <!-- Slide Up -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Up Full -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Down -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Down Full -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Left -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Right -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Bottom Right -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Bottom Left -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Top Right -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Slide Top Left -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption</span>

  </div>

  <!-- Reveal Up Half -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption <br / ><br / > with some more info</span>

  </div>

  <!-- Reveal Up Full -->

  <div class="image revealUpFull">

    <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />

    <span class="title">Caption <br / ><br / > with some more info</span>

  </div>

</div>

body {

  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;

  font-size: 13px;

}

div.container {

  margin: 50px auto;

  width: 675px;

}

div.image {

  position: relative;

  overflow: hidden;

  width: 150px;

  height: 150px;

  display: inline-block;

  margin-right: 15px;

  margin-bottom: 15px;

}

img {

  position: absolute;

  left: 0;

  top: 0;

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -ms-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}

span.title {

  width: 150px;

  height: 20px;

  position: absolute;

  background: rgba(30,30,30,0.9);

  text-align: center;

  padding: 5px 0 4px;

  font-size: 14px;

  color: white;

  font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -ms-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}

/* REVEAL UP FULL */

div.image.revealUpFull span { 

  height: 141px;

  width: 150px;

  bottom: -120px;

}

div.image.revealUpFull:hover img {

  top: -150px;

}

div.image.revealUpFull:hover span {

  bottom: 0px;

}