Texte qui s'affiche au survol de la souris

zoro -
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

Afficher la suite

A voir également:

Afficher un texte au survol de la souris html
Quelle touche pour débloquer la souris ? - Guide
Editeur html - Télécharger - HTML
Dans le diaporama à télécharger, les diapositives s’enchaînent automatiquement. combien de temps la diapositive crayon met-elle à s’afficher ? combien de temps reste-t-elle affichée à l’écran ? ✓ - Forum Powerpoint
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide

5 réponses

Réponse 1 / 5

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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,

Réponse 2 / 5

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

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.

<!DOCTYPE html>
<!-- http://css-workshop.com/examples/hover-box/example6.html -->
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>

	<style>
	.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_slideright {
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	.hvrbox:hover .hvrbox-layer_slideright,
	.hvrbox.active .hvrbox-layer_slideright {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	</style>
</head>
	<body>
		<div class="hvrbox">
			<img src="http://css-workshop.com/examples/hover-box/img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom">
			<div class="hvrbox-layer_top hvrbox-layer_slideright">
				<div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div>
			</div>
		</div>
	</body>
</html>

Réponse 3 / 5

zoro

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

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Le fichier se trouve dans l'archive à télécharger sur le lien que tu nous donnes dans ton premier message : https://forums.commentcamarche.net/forum/affich-34840165-texte-qui-s-affiche-au-survol-de-la-souris#p34843669
"Download Component"

Réponse 4 / 5

zoro

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

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Evite l'utilisation de l'attribut style dans ton html et ajoute ceci à la fin de ton css :

.hvrbox .hvrbox-text {
  width: 100%;
  top: 60%;
  font-family: Cursive;
}

Discussions similaires

Plus de souris sur Asus

Le pointeur de la souris disparaît

Ecran noir avec curseur de la souris

Défilement par la souris bloqué

Le curseur de ma souris d'ordi a disparu. Comment le retrouver ?

curseur PC ACER disparu de l'écran

Votre réponse

Discussions similaires