Code de transition d'image dans catégorie pour afficher les sujets

[Hollfeather]

Bonjour,

Cela fait maintenant plusieurs jours que je cherche en vain une solution pour les catégories de mon forum.
Je m'explique.

J'aimerai qu'au passage de la souris sur une image, elle disparaisse (peu importe l'effet) et laisse place à des liens : comme sur ce forum http://follow-your-destiny.forumactif.org/
ou encore http://onelastkiss.bbfr.net/

Comment puis-je faire pour avoir les mêmes effets ?
Quel code css dois-je créer et quelle est la partie du template de index_box dois-je modifier ?

MERCI à tous ceux qui m'aideront.

[_backdraft_]

Bonsoir,

Pour faire cette manoeuvre il faut s'y connaitre dans les templates ainsi que les CSS.

Dans le template concerné repérez l'endroit ou vous voulez le placer et mettez ceci :

Code:

<div clas="image">
<div class="lien">
<a href="url du lien">TEXTE1</a><br>
<a href="url du lien2">TEXTE2</a>
</div>
</div>

En remplaçant bien sur les liens et le texte et n'oubliez pas de publier.

En suite dans le CSS ajoutez ceci :

Code:

.image {
background-image: url(url de l'image);
background-position: center center;
background-repeat: no-repeat;
}

.image .lien {
-moz-transition: .8s ease-in-out opacity;
-o-transition: 8s ease-in-out opacity;
-webkit-transition: .8s ease-in-out opacity;
background-color: #F3F3BE;
height: 80px;
margin: -2px;
opacity: 0;
padding: 10px;
text-transform: lowercase;
transition: .8s ease-in-out opacity;
width: 130px;
}

N'oubliez pas également de remplacer l'url de l'image qu'il faudra survoler pour voir les liens et n'oubliez pas de sauvegarder vos CSS.

Cordialement
Backdraft

[Hollfeather]

Merci de ton aide mais cela ne marche pas. L'image ne s'affiche pas et je n'ai que les liens.
J'ai même rajouter les " ... " à background-image: url(url de l'image); qui donne background-image: url("url de l'image");

rien à faire.

Une autre idée ?

[_backdraft_]

Re,

Puis je avoir ton template modifié avec le code que tu as mis dedans et également le CSS que tu as ajouté s'il te plait.

Si je vois aucunes erreurs j'essayerais autre chose
Backdraft

[Hollfeather]

En faite, je ne vais plus dans le template car il ne me propose pas la chose que je veux faire.
Je suis allée dans les catégories, puis la description et j'ai mis ceci :

Code:

<table><td><a class="text"><br><br><[url=google.fr]lien 1[/url]<br>[url=URL DU LIEN]LIEN[/url]<br>
ccccc</a></td><td><div class="part10" style="align:justify;">DESCRIPTION</div></td></table>

CSS :

Code:

.text:hover{
background: #FFFFFF;
width: 150px;
height: 120px;}
 
.text{
background-image: url("http://75.img.v4.skyrock.net/2965/84302965/pics/3174877619_1_3_B8oOpKUA.png"); 
display: block;
width: 150px;
height: 120px;
position: relative;
 text-indent:-9999px;
background-repeat: no-repeat;}

Mais un problème persiste, le texte reste sur l'image alors qu'il devrait ne pas être affiché.

merciii

[_backdraft_]

Non mais c'est normal, essayez de mettre ce que je vous ai donné dans la description de votre catégorie

Backdraft

[Hollfeather]

C'est ce que j'ai fais, mais l'image ne s'affiche pas...

Spoiler:

1er : votre code (l'image n'est pas là)
2ème: mon code (le texte est quand même sur l'image)

[_backdraft_]

Question bête, vous êtes sur d'avoir enregistré le CCS car quand je vais sur votre forum et que j'inspecte votre code je ne vois nul part de CSS appellé image et lien.

Cordialement
Backdraft

[Hollfeather]

oui, je l'avais fais, j'avais juste donné ma partie de CSS ^^

Code:

.text:hover{
background: #FFFFFF;
width: 150px;
height: 120px;}
 
.text{
background-image: url("http://75.img.v4.skyrock.net/2965/84302965/pics/3174877619_1_3_B8oOpKUA.png"); 
display: block;
width: 150px;
height: 120px;
position: relative;
 text-indent:-9999px;
background-repeat: no-repeat;}

.image {
background-image: url(url de l'image);
background-position: center center;
background-repeat: no-repeat;
}
 
.image .lien {
-moz-transition: .8s ease-in-out opacity;
-o-transition: 8s ease-in-out opacity;
-webkit-transition: .8s ease-in-out opacity;
background-color: #F3F3BE;
height: 80px;
margin: -2px;
opacity: 0;
padding: 10px;
text-transform: lowercase;
transition: .8s ease-in-out opacity;
width: 130px;
}

toujours même résultat.

[_backdraft_]

background-image: url(url de l'image);

Remplacez par :

Code:

background-image: url("http://75.img.v4.skyrock.net/2965/84302965/pics/3174877619_1_3_B8oOpKUA.png");

Backdraft

[Hollfeather]

C'est ce que j'avais souligné dans ma réponse, j'avais fais la modification en mettant les ""
J'ai (quand même) copié ce 'nouveau' code, publié, actualisé, mais rien à faire...
Toujours le même cas de figure.

serait-ce à cause du template ? (même si je ne vois pas pourquoi celà serait de sa faute...)

[_backdraft_]

Bah en faite je comprends pas trop je me suis inspiré du premier site que vous avez donné comme exemple, il me semblait qu'ils faisait comme ça, on va essayer avec le deuxième site :

Essayez de mettre ceci dans la description :

Code:

<div class="sousliencat">
  <div class="blocVolet"><img src="http://75.img.v4.skyrock.net/2965/84302965/pics/3174877619_1_3_B8oOpKUA.png"></div><br><a href="http://forumactif.com;">LA FAQ</a><br>
<a href="http://forumactif.com" style="color:#cfaba4;">LE LIVRE D'OR</a><br>
<a href="http://forumactif.com" style="color:#cfaba4;">IDEES/QUESTIONS</a><br>
 <a href="http://forumactif.com" style="color:#cfaba4;">LES NOUVEAUTES</a><br>
 <a href="http://forumactif.com" style="color:#cfaba4;">LES ABSENCES</a></div>

Et ceci dans le CSS :

Code:

.sousliencat {
position: relative;
overflow: hidden;
width: 120px;
height: 76px;
line-height: 10px;
text-align: center;
text-transform: uppercase;
font-family: arial;
border: #d8ccc5 solid 1px;
font-size: 9px;
background-color: #fdf8f7;
text-shadow: white 0px 0px 1px;
}

.blocVolet {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 76px;
background: #fdf8f7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

[_backdraft_]

edit : j'ai oublié ceci dans le CSS !

Code:

.sousliencat:hover > .blocVolet { left: -120px;}

[Hollfeather]

Celui-ci marche impeccable !!!! merci beaucoup.
Tu aurais une idée de pourquoi l'autre ne marchais pas ? Car l'effet sur l'image m'intéresse beaucoup.

merci encore !!!

[_backdraft_]

Oui il me manque une partie du CSS mais je suis désolé je n'arrive pas à le faire, il est trop compliqué...

Cordialement
Backdraft