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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Hollfeather le Jeu 18 Juil 2013 - 17:28

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.


Dernière édition par Hollfeather le Ven 19 Juil 2013 - 3:16, édité 1 fois

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Jeu 18 Juil 2013 - 21:19

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 2:08

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 ?

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 2:19

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 Wink
Backdraft

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 2:23

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

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 2:26

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

Backdraft

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 2:32

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)

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 2:40

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 2:44

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.

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 2:49

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 2:53

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...)

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 3:03

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_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 3:05

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

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par Hollfeather le Ven 19 Juil 2013 - 3:15

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 !!!

Hollfeather
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 18/07/2013

http://aroundthecorner.frbb.net/
Hollfeather a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code de transition d'image dans catégorie pour afficher les sujets

Message par _backdraft_ le Ven 19 Juil 2013 - 3:33

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum