css :hover is not working in this code
<p>I'm trying to put the <code>figcaption</code> upon the <code>figure</code> so I'm using the <code>:hover</code>in order to do it, but it's not working and here's the HTML:</p>

<pre><code>&lt;section class="portfolio"&gt;
        &lt;figure class="four columns all illustrations" data-category="illustrations"&gt;
            &lt;img src="http://placehold.it/220x220" alt="This is 1st portfolio thumbnail."&gt;
            &lt;figcaption&gt;
                &lt;h4&gt;Lorem Ipsum&lt;/h4&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Morbi molestie lobortis magna eget sagittis.&lt;/p&gt;
            &lt;/figcaption&gt;
        &lt;/figure&gt;
</code></pre>

<p>and this is my css:</p>

<pre><code>.portfolio figcaption {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  padding: 10%;

  background-color: rgba(58,63,67,.8);

  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);

  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms;
}
.portfolio figure:hover  figcaption {
  -webkit-transform: tranlateX(0);
  -moz-transform: tranlateX(0);
  -ms-transform: tranlateX(0);
  transform: tranlateX(0);

  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms;
}
</code></pre>

<p>where did i miss and how can i fix it?</p>