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 :
Et voila la partie du code HTML :
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 .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; }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
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.
Partager