Texte qui s'affiche au survol de la souris

Fermé
zoro - 2 sept. 2017 à 19:50
 zoro - 4 sept. 2017 à 15:38
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

5 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 sept. 2017 à 10:58
Salut,

Il semble qu'il te manque le fichier hover-box.css fournit dans le composant, il faut penser à inclure ce fichier dans ton html.

Tu peux trouver aussi trouver des exemples ici : https://github.com/fronteos/hover-box

Bonne journée,
0