texte qui s'affiche au survol de la sourisFermé

Question

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

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 Configuration: Windows / Firefox 55.0

Pitet · Answer

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,

codeurh24 · Answer

Bonjour. il fallait lire tranquillement l'article depuis le début. J'ai fait le même erreur que toi en allant directement au code source proposé. Si on reprend le premier exemple et qu'on ajoute / modifie le code avec html et css plus bas donné en exemple cela fonctionne très bien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

zoro · Answer

Bonjour,
en cliquant sur examiner l'élément de l'image, j'ai ajouté une partie qui ne figurait pas dans le code:

.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}
.hvrbox .hvrbox-layer_image {
	padding: 0;
	background: none;
}
.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);
}

par contre je ne comprends pas où trouver le fichier hoverbox css. 
Est ce ce fichier que l'on doit ajouter au html pour faire le lien avec le css ou est ce une partie du code css à ajouter (question de novice)

merci pour votre aide

zoro

zoro · Answer

super!!4cela fonctionne,
j'ai effectué quelque changement et j'ai encore besoin de vos lumière si possible.
Je n'arrive pas à cadrer correctement ma texte en hover. J'ai beau jouer avec les margin... je ne trouve pas.

Autre question, je souhaiterai modifier la police; la pareil j'ai fait des modification mais pas sur que cela fonctionne. POuvez vous jeter un oeil? je fais les tests sur cette page: https://jsfiddle.net/85oskj0r/
Merci beaucoup
zoro

zoro · Answer

Ok merci du coup de main... effectivement je ne mettais pas les bons éléments pour centrer mon texte. Moi j utilisais margin: avec des px mais c'était approximatif... Là au moins c'est clair.

Du coup, pour les styles j'ai regardé dans ma page et il y en a vraiment beaucoup. Pourquoi ne pas utilisé ça? J'ai remarqué que c'était bcp pour les tailles des éléments... 
Pourquoi éviter de les utiliser?

Merci 

zoro

Texte qui s'affiche au survol de la souris

5 réponses

Discussions similaires

Newsletters