Aller au contenu
novis

effet hover sur texte

Noter ce sujet :

Recommended Posts

novis    0

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

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×