effet hover sur texte

[novis]

Bonjour,
Je souhaite créer un effet de texte sur une image lors du survol de la souris. Je souhaiterais que le texte arrive par la gauche.

J'ai trouvé un site qui illustre bien mon envie. http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/

J'ai donc testé sur mon site... Mais la phrase n'arrive pas avec l'effet, elle s'affiche en dessous. Pourtant le code ne parait pas très complexe...

J'ai bien suivi les html:
 

<div class="hvrbox"> 
  <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> 
  <div class="hvrbox-layer_top hvrbox-layer_slideleft"> 
    <div class="hvrbox-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Fusce porttitor ligula porttitor, lacinia sapien non.
    </div> 
  </div> 
</div>

Là j'ai modifié mon image même si ce n'est pas la définitive. J'envisage de mettre un fond blanc. (Y a t il une taille spécifique à mettre? il n'est pas indique sur le site...)

et le css que je n'ai pas modifié pour l'instant:
 

.hvrbox .hvrbox-layer_slideleft {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

Et ensuite j'enregistre ma page css et je récupère le code link que j'insère sur mon html. Mais cela ne fonctionne pas...

Pouvez vous m'aider? Je pense que si je comprends ça...

il y aura une grande avancée car je débute et là je ne vois pas ce qui ne va pas... Merci pour votre aide zoroo