css :hover is not working in this code

Question

I'm trying to put the figcaption upon the figure so I'm using the :hoverin order to do it, but it's not working and here's the HTML:

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

and this is my css:

.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;
}

where did i miss and how can i fix it?

Answer 1

It works, but you misspelled translateX. Change tranlateX to translateX.

Also, redeclaring the transition properties inside of :hover is not necessary.

Change

.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;
}

To

.portfolio figure:hover figcaption {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}