Discussion :

[novis5]

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-te...over-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:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.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

[vttman]

Il manque des choses dans le css
=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
.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);
}

Comment ai-je trouvé ça ?
Click droit sur l'image sous Firefox => examiner l'élément (chercher inspecteur / outil de développement)
On voit apparaitre des règles css pour ce qui nous concerne stockées dans le fichier hover-box.css que j'ai ouvert
et ou j'ai fait un peu de ménage pour que ça marche, test sous codepen (front end developper playground & code editor)

[novis5]

Merci pour votre réponse,

Alors je pense ne pas insérer les codes correctement car l'effet de texte ne fonctionne pas.
J'explique mon cheminement en espérant que quelqu'un pourra me dire ce que je ne fais pas bien.

1: code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="hvrbox"><img alt="Mountains" class="hvrbox-layer_bottom" src="http://adresse de mon image.jpg" style="height: 200px; width: 200px;" />
<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>

2: code css:
j'ai donc mis le code que vttman m'a transmis dans ma page css.

3: incrustation du code css dans le head de ma page html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="http://www.adresse de mon css.css" rel="stylesheet" type="text/css" />

et lorsque j'enregistre et que je visualise... le texte est écrit directement sous l'image, il n'y a pas d'effet...


Qu'est ce qui ne va pas dans ma démarche? J'aimerai bien comprendre...

Merci pour votre aide

Novis

[vttman]

Le lien

http://www.adresse de mon css.css

doit ouvrir le fichier css ? si ça n'est pas le cas c'est que le chemin ou nom du fichier css n'est pas bon
et je suggérerais de mettre un lien en chemin relatif
ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="/css/monfichier.css" rel="stylesheet" type="text/css"/>

=>
Ici le monfichier.css est à placer dans le répertoire http://monsite.com/css


Sinon sous codepen voici l'effet voulu réalisé pour info ...
https://codepen.io/messinmaisoui/pen/wqOWez

[novis5]

oui c'est exactement cet effet là!

Donc si j'ai bien compris, au lieu de mettre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="http://www.adresse de mon css.css" rel="stylesheet" type="text/css" />

j'enlève le http://www. et je met:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="/css/adresse de mon css.css" rel="stylesheet" type="text/css"/>

je vais essayer ce chemin là

(merci de votre aide...)