Sliding figure: Animating the revealed of figcaption

by kseso

HTML

<figure class="puerta x">
  <figcaption>Css a Fondo</figcaption>
  <img src="http://4.bp.blogspot.com/-meAG8mj-VNU/UUnGnKM6iMI/AAAAAAAAGco/ijPN3xTsiSg/s1600/revelar-x.jpg" alt="">
  <img src="http://4.bp.blogspot.com/-meAG8mj-VNU/UUnGnKM6iMI/AAAAAAAAGco/ijPN3xTsiSg/s1600/revelar-x.jpg" alt="">
</figure>

<figure class="puerta y">
  <figcaption><span>Las Arribes</span> del RĂ­o Duero en "La Raya" de Salamanca y Zamora con Portugal.
  <a href="https://twitter.com/search?q=%23arribesquierevida">#ArribesQuiereVida</a>
  </figcaption>
  <img src="http://2.bp.blogspot.com/-EMMxQRG7bwc/UUnGmu3Q6WI/AAAAAAAAGck/5w38nkTha-A/s1600/revelar-y.jpg" alt="">
  <img src="http://2.bp.blogspot.com/-EMMxQRG7bwc/UUnGmu3Q6WI/AAAAAAAAGck/5w38nkTha-A/s1600/revelar-y.jpg" alt="">
</figure>

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700);
* {margin: 0; padding: 0; border: 0 none; position: relative;}
*, *:after, *:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background: #efe3bd;
  font-family: Quicksand, sans-serif;
  font-size: 1rem;;
  height: 100%;
  text-align: center;
  text-shadow: 0 0 1px #444;
}
.puerta {
  background: #ff7361;
  display: inline-block;
  text-align: left;
  box-shadow: 0 0 5px rgba(0,0,0,.4);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
  color: #fff;
  margin: 1rem auto;
}
.puerta img {
  position: absolute;
  -webkit-transition: .8s linear; 
  -moz-transition: .8s linear; 
  -ms-transition: .8s linear; 
  -o-transition: .8s linear; 
  transition: .8s linear;
  width: 100%;
}
figcaption {
  position: absolute;
}
.x figcaption {
  font-size: 6rem;
  line-height: 400px;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
}
.y figcaption {
  font-size: 1.5rem;
  line-height: 1.2;
  top: 120px;
  left: 165px;
  right: 165px;
}

.x img:nth-of-type(1) {clip: rect(0px,600px,200px,0px);}
.x img:nth-of-type(2) {clip: rect(200px,600px,600px,0px);}
.x:hover img:nth-of-type(1) {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transform: translateY(-100px);
}
.x:hover img:nth-of-type(2) {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
}

.y img:nth-of-type(1) {clip: rect(0px,300px,400px,0px);}
.y img:nth-of-type(2) {clip: rect(0px,600px,400px,300px);}
.y:hover img:nth-of-type(1) {
    -webkit-transform: translateX(-150px);
    -moz-transform: translateX(-150px);
    -ms-transform: translateX(-150px);
    -o-transform: translateX(-150px);
    transform:...