Affichage texte sur une image (hover)

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Depuis plusieurs jours je me bat avec mon code afin d'afficher un texte sur une image avec une animation. En effet, je souhaite réaliser une mosaïque de photos et, sur celles-ci afficher un texte au passage de la sourie dessus. J'ai alors cherché et trouver sur ce site l'animation que je souhaite :http://karine.do/fr/aide/effet-au-passage-de-la-souris/

Je l'ai alors ajouté à mon code dont voila un extrait concernant ce probleme :

Code:

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
.etage1gauche img{
  margin-left: 0.5%;
  margin-top: 5%;
  float:left;
  width:32.6%;
	}
  .etage1gauche {
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  position: relative;
}
.etage1gauche:hover .texteflorencenuit {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.etage1gauche img {
  line-height: 0;
}
.etage1gauche .texteflorencenuit {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  line-height: normal;
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
 
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
 
.etage1gauche.slidedown:hover .texteflorencenuit {
  max-height: 100%;
 
  -webkit-transition: max-height 0.2s linear;
  -moz-transition: max-height 0.2s linear;
  -o-transition: max-height 0.2s linear;
  -ms-transition: max-height 0.2s linear;
  transition: max-height 0.2s linear;
}
.etage1gauche.slidedown .texteflorencenuit {
  max-height: 0;
 
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

Et voila la partie du code HTML :

Code:

1
2
3
4
<div class="etage1gauche slidedown">
	<a class="zoombox zgallery2" href="http://www.freemages.fr/album/italie/florence_arno_by_night.jpg"><img src="http://www.freemages.fr/album/italie/florence_arno_by_night.jpg" alt="" title="Florence"/></a>
	<div class="texteflorencenuit"> Florence...</div>
</div>

Voila le résultat que j'ai, et donc le blocage :

Pièce jointe 161518

L'animation se fait sur le div qui prend la totalité de la page et non uniquement sur la photo, ce que je ne comprend pas. Les photos sont alors toutes décalées.
Voici mon soucis que je n'arrive a régler.

Merci d'avance pour votre aide.

15/11/2014, 17h47
NoSmoking

Bonjour et bienvenue sur DVP.
Je ne saurais trop te conseiller de reprendre exactement l'exemple avant de tout vouloir modifier et de faire tes modifications sur le CSS en connaissances, il semblerait que tu te soit un peu mélangé.
15/11/2014, 18h56
ParisElliot

Merci a toi NoSmoking.

Concernant l'exemple repris, j'ai simplement modifier le nom des classes dessus. Avant cela, j'avais mis en place ma classe etage1gauche afin de positionner mon image. Je viens alors de remplacer le poucentage de ma classe etage1gauche par des pixels et la ça marche. Je ne comprends absolument pas pourquoi ça ne prend pas en compte le pourcentage... Or, pour que les photos s'adaptent aux différents écrans, j'aimerai garder les tailles en pourcentage. Donc solution d'un coté mais de nouveau un problème qui me nécessite de l'aide.

Il te faut faire pour commencer une modification de ta structure HTML, mettre la DIV dans le lien, j'en profite pour mettre à la place un SPAN, un FIGCAPTION serait plus judicieux en utilisant une FIGURE.

Code:

1
2
3
4
5
<div class="etage1gauche slidedown">
    <a class="zoombox zgallery2" href="http://www.freemages.fr/album/italie/florence_arno_by_night.jpg"><img src="http://www.freemages.fr/album/italie/florence_arno_by_night.jpg" alt="" title="Florence"/>
        <span class="texteflorencenuit"> Florence...</span>
    </a>
</div>

ceci étant fait il faut également modifier légèrement le CSS comme mentionné ci dessous

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.etage1gauche img{
/*  margin-left: 0.5%;  /**/
/*  margin-top: 5%;     /**/
/*  float:left;         /* pas franchement utile */
/*  width:32.6%;        /**/
  width:100%;           /* force les proportions */
	}
.etage1gauche {
  display: inline-block;
  margin-top: 5%;       /* déplacement */
  margin-left: 0.5%;    /* déplacement */
  width:32.6%;          /* déplacement de la largeur */
  line-height: 0;
  overflow: hidden;
  position: relative;
}

16/11/2014, 16h34
ParisElliot

Merci beaucoup pour ton aide, ton code est parfait? problème résolu !

Encore merci !!