animation que sur la 1ere image
Bonjour à tous;
Je poste sur le forum Javascript car je suppose que mon problème soit du js.
Bref,
j'ai fais un blog avec des articles en ligne : lien
Et j'ai voulu qu'au survol de chaque image, il y ai une courte description.
Déjà la description s'affiche, c'est déjà ca.
Maintenant, l'animation que je désire, à savoir un défilement depuis le bas de l'image; fonctionne uniquement sur l'article "Téléréalité sur Mars en 2022", peut etre parcequ'il s'agit d'un dernier article, et que mon javascript ne prends en compte que le dernier ? car pour les autres images, le texte est figé dès le départ
Bref je voudrais savoir ce qu'il faut faire pour que ce défilement fonctionne pour tous les articles.
je ne suis pas un connaisseur du JS, mais j'ai utilisé ce plugin : lien
Maintenant je suppose que vous voulez voir mon code :
html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="capslide_img_cont" class="ic_container">
<a href="<?php $plxShow->artUrl(); ?>">
<?php eval($plxShow->callHook('champArt', 'imagethumb')); ?>
</a>
<div class="ic_caption">
<p class="ic_text">
<?php eval($plxShow->callHook('champArt', 'entete')); ?>
</p>
</div>
</div> |
css
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
| .ic_container{
width:248px;
height:155px;
margin-bottom:20px;
border:4px solid #B7B7B7;
background-color:black;
background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 1px, transparent 6px);
background-size: 8px 8px;
}
.ic_container img{
height:100%;
width:100%;
}
.ic_container a :hover{
opacity:0.4;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-khtml-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
.ic_caption{
overflow:hidden;
margin:0px;
padding:0px;
left:0px;
right:0px;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
margin-top:-80px;
}
.ic_text{
padding:10px;
margin:0px;
font-size:14px;
color: white;
} |
Pour le JS, le code étant trop long, je vous le met ici :
lien1
lien2
Voilà , si vous arrivez à voir ce qui bloque à la première image, ca serait formidable !!
Merci d'avance !
