effet de survol sur les sous forums

[Loü]

Bonjour  

Je viens quémander votre aide (précieuse) pour un effet que je cherche à obtenir depuis deux jours, malheureusement sans succès.

L'effet désiré se situe au niveau des sous forums (exemple : http://www.falling-angels.org/). Je voudrais savoir comment faire une transition au survol comme présentement.

Je dispose de deux images : https://2img.net/r/hpimg15/pics/247814revelio.png & https://2img.net/r/hpimg15/pics/815907revelio2.png

Je suis en phpbb2, fondatrice du forum et j'ai modifié mes templates et mon css.
Lien direct vers le forum : http://cursedtown.forumactif.org/

Template index-box modifié :

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 
</td>
 
</tr>
</table>
<!-- BEGIN catrow --><table class="forumline" width="100%" cellspacing="0" cellpadding="0"><!-- BEGIN tablehead --><table class="forumline" width="100%" cellspacing="0" cellpadding="0">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<!-- END tablehead -->
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <h{catrow.cathead.LEVEL} class="hierarchy">
 <span class="cattitle">{catrow.tablehead.L_FORUM}
                                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 </h{catrow.cathead.LEVEL}>
 </td>
 <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
                  <div style="width:150px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br/><br/><span class="dernierpost">{catrow.forumrow.LAST_POST}</span></div>
</td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        
                   </span>
                 </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
                  <span class="genmed">{catrow.forumrow.FORUM_DESC}<div class="sujetsetmessages">{catrow.forumrow.POSTS} beuglantes ✧ {catrow.forumrow.TOPICS} hiboux</div></span>
                  <br/><br/>
                                  <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 </span>
 
                                 </td>      

         <td class="row3 over deco_sujet" align="center" valign="middle" height="50">
            <div style="width:200px;"><span id="subforums"><div class="sousforums">{catrow.forumrow.LINKS}
        <script type="text/javascript">
          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' <br />')).removeAttr('id');
                    </script><br/><br/></div></span></div>
            </td>
 
         </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="LIEN" /></td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Feuille Css :

Code:

.secondarytitle { background-image: url('http://img11.hostingpics.net/pics/271341sidhaut.png'); width: 800px; height: 180px; }

.infobulle{position: relative;z-index: 0;}
        
       .infobulle:hover{background-color: transparent;z-index: 50;}
        
       .infobulle span{
        position: absolute;
        background-color: #000000;
        padding: 5px;
        left: -1000px;
        visibility: hidden;
        color: #FFFFFF;}
        
       .infobulle span img{
        border: 1px;
        padding: 5px;}
        
       .infobulle:hover span{
        visibility: visible;
        top: 70px;
        left: 35px;
        width: 150px ;
  weight:250px;
  height:35px;
        color:#FFFFFF;
        border: 1px solid #000;
  vertical-align: middle;
  margin-left:80px;
  box-shadow: 0px 0px 60px #ffffff;
font-size:9px;}

     .infobulle2{position: relative;z-index: 0;}
        
       .infobulle2:hover{background-color: transparent;z-index: 50;}
        
       .infobulle2 span{
        position: absolute;
        background-color: #000000;
        padding: 5px;
        left: -1000px;
        visibility: hidden;
        color: #FFFFFF;}
        
       .infobulle2 span img{
        border: 1px;
        padding: 5px;}
        
       .infobulle2:hover span{
        visibility: visible;
        top: 70px;
        left: 35px;
        width: 400px ;
        color:#324247;
        border: 1px solid #000;
margin-top:-330px;
margin-left:-35px;
padding-left:15px;
padding-right:15px;
padding-bottom:15px;
padding-top:8px;
font-size:9px;
font-family:times new roman;
overflow:auto;
height:230px;}


/*COMPTEUR DE MOTS*/

.word-count { text-align: center;
 text-transform:uppercase;
  font-size: 0.8em;
 color: #0B0D13;}
 


@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  src: local('Allura'), local('Allura-Regular'), url(http://themes.googleusercontent.com/static/fonts/allura/v1/piROihwq0_hcWhCbsLJUv-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

.sousforums a {
text-align:center;
font-size: 8px !important;
text-transform:uppercase;
}

.sujetsetmessages{
text-align:center;
background:#06080f;
text-transform:uppercase;
font-size:8px;
margin-top:-30px;
border:1px solid #06080f;
margin-right:7px;
margin-left:7px;
}

.dernierpost{
text-transform:uppercase;
font-size:8px;}

span.dernierpost a{font-size:8px !important;
}

.deco_sujet {
background: url('http://img15.hostingpics.net/pics/815907revelio2.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}

.imgover, .imgover img{
 width:95;
height:100;
transition:2s all;
-webkit-transition:2s all;
overflow:hidden;
}
.imgover img{
position:absolute;
top:0;
left:0;
}
.imgover{
position:relative;
}
.imgover:hover img{
opacity:0;
}



.bodyline {background:none;
        border:none;}

{text-transform: lowercase; }




 body{
        background-color: #000003;
        background-image: url("http://img15.hostingpics.net/pics/567900AvadaKedavra2.png");
        background-position:top;
        background-repeat:no-repeat;
        }

input.post, textarea.post {
   border-radius: 20px;
  border: 2px dotted #14161A;
}

.input,textarea, select {
-moz-border-radius: 10px;
padding-left: 3px;
border: 2px dotted #14161A;
}

a.mainmenu
{
 color:#ADE0E8;
  font:times new roman;
font-size:11px;
width:100%;
background:#14161A;
text-transform:uppercase;
}

.mainmenu img
{
display : none !important;
}

.maintitle
{
margin-top:-140px;
}

/*CHATBOX*/
body.chatbox {
    background-color: #000000;
}
#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options,
#chatbox_header .chatbox-options a {
color: #ffffff;
}
#chatbox_header .catBottom .cattitle {
color: #ffffff;
}
#chatbox_members ul li,
#chatbox_members ul li a {
color:#ffffff;
}
.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 a,
.chatbox_row_2 a,
.chatbox_row_3 a  {
color: #383d3d;
}

/*LIENS DU FORUM*/

a:hover{
text-decoration: none !important;
}
 
a {
text-decoration: none !important;
}
 
a:link {
text-decoration: none;
}

u {
border-bottom: 1px dotted #ADE0E8;
text-decoration: none}



a.forumlink {
font-size: 43px;
  font:tangerine;
  font-style :italic;
  background-color:#0C0E14;
  text-align:center;
  background-position:50% 50%;
  margin-bottom:-18px;
letter-spacing:2px;
  display: block;
-moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;}
a.forumlink:hover {
font-size: 43px;
  font:tangerine;
  font-style :italic;
  background-color:#0C0E14;
  text-align:center;
  background-position:50% 50%;
  margin-bottom:-18px;
letter-spacing:2px;
  display: block;
-moz-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        transform: rotate(20deg);
        }


/*CORPS DES MESSAGES*/
div.postbody {
  text-align: justify !important;
  background-color:#000000;
border:2px solid #14161A;
  border-radius:0px;
  margin-left: 5px;
  margin-right:10px;
 padding-left:20px;
  padding-right:20px;
  padding-top:40px;
  padding-bottom:40px;}
.code {
    border: 2px  dotted;
}

/* MODIFICATION DES CATEGORIES */

 .bascatego  {margin-top:-27px;}  

.description {
  background: #000003;
  text-align: justify;
  line-height:14px;
  padding:30px;
  margin-left: 3px;
  margin-right: 3px;
  border-radius:0px;
padding-left: 40px;
  padding-right: 40px;
}




/* FIN DES MODIFICATIONS DES CATEGORIES */

/*PROFIL*/

        /*DEBUT MISE EN FORME PROFIL*/
        
               td.profil_contour {
            background-color: #000;
            border-radius: 100px;
            text-align: center;
            vertical-align: middle;
            overflow: hidden;
            padding: 0 0 80px 0;
        }
        .infosduprofil img {
            position: absolute;
            bottom: -80px;
            left: 0px;
            width: 260px;
            max-height: 130px;
        }
        div.infosduprofil {
            background:#000000;
            border-radius:0px;
            margin: 0px 0px 0px 0px;
            padding:15px;
            text-transform:uppercase;
            letter-spacing:1px;
            font-size:9px;
            font-family:times new roman;
  position: relative;
  text-align: left;
        }
        div.pseudo {
            font-family: Tangerine;
            font-style:italic;
            font-size: 34px;
            text-transform:lowercase;
            margin-top:-16px;
        }
        div.rang {
            font-family:times new roman;
            font-size: 8px;
            text-transform:uppercase;
            letter-spacing:2px;
            color:#ffffff;
            margin-top:-10px;
        }
        
       div.avatar_profil img {
            width: 200px;
            border : solid 2px #000000;
            border-radius:100px 100px 0px 0px;
            margin-top: 5px;
        
       }
        
       /*FIN MISE EN FORME PROFIL*/

/*QEEL*/

/* conteneur du QEEL */
.QeelPerso {
   background-color:#0a0d12;
  padding: 5px;
}

/* Centrage image du QEEL */
.ImgQeel {text-align:center;}

/* Mise en forme des liens vers les groupes */
.ListeGroupes a {
   font-size:32px; /* taille du texte */
  font-family:Tangerine;
  font-style:italic;
   text-transform:lowercase; /* texte en minuscules */
   text-decoration: none!important; /* pas de soulignement du lien */
   letter-spacing:1px; /* espacement des lettres */
}

/* Couleurs des groupes */
a.groupe1 { color:#1a2742 ; }
a.groupe2 { color:#B5ADBA ; }
a.groupe3 { color:#ffffff ; }


/* Mise en forme des cellules de statistiques */
.statistiques {
   background-color: #0C0E14; /* couleur de fond */
  border-radius:100px;
   padding:5px;
   margin:5px;
   text-align:justify; /* alignement texte */
}

/* Limitation en hauteur des blocs de statistiques */
.BlocStats {
   overflow:auto;
   max-height: 200px; /* hauteur maxi */

}

/* Debuggage : on retire le fond de la liste des dernières 24h */
.DeBug td.row1 { background : none; }


/*MODELE POSTES VACANTS*/
.titre2 { text-transform: lowercase;
  letter-spacing: -3px;
  font-family: arial;
  font-style: italic;
  text-align: center;
  font-size: 50px;
  color: #a1b531;
 }


.pv span {background-color:#f0eded;
padding: 3px 7px 3px 7px;
text-align: center;
border-right: solid 2px #F8FCFE;
border-left: solid 2px #F8FCFE;
Font-weight: italic;
font-family : cinzel decorative;
font-align: justify;
font-size : 15px;
border-radius : 50px 0px 50px 0px;
  text-shadow: 0px 0px 2px rgb(250, 241, 205);
}
.histpv {
    background-color: #000000;
  text-align: justify;
  font-size:9px;
  line-height:14px;
  padding:8px
margin-left: 10px;
margin-right: 10px;
}
.titrepv {background-color:#0B0D13;
padding: 3px 7px 3px 7px;
letter-spacing:2px;
text-align: center;
border-bottom: dotted 3px #ADE0E8;
Font-weight: italic;
font-family : Tangerine;
color:#ffffff;
font-size : 48px;
  text-shadow: 0px 0px 2px rgb(250, 241, 205);
}
.caractèrepv {background-color:#0B0D13;
padding: 3px 7px 3px 7px;
text-align: center;
border-bottom: dotted 3px #ADE0E8;
border-radius:0px 0px 0px 0px;
text-transform:uppercase;
font-family : times new roman;
letter-spacing:1px;

}



/* FIN FORMULAIRE DES PV */


[MlleAlys]

Bonjour ! ^^

J'ai bidouillé un peu, mais je suis arrivée à quelque chose en faisant ça :
Plutôt que de changer l'image, j'ai mis un fond noir à la div contenant les sous forums et j'ai fait apparaitre celle-ci au passage de la souris.
Ce qui nous donne :

- modifier l'image de fond de .deco_sujet en remplaçant le cadre vide par celui avec "revelio", ce qui donne :

Code:

.deco_sujet {
    background: url(http://img15.hostingpics.net/pics/247814revelio.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}


- Puis on met en forme la div contenant les sous-forums : J'ai fixé la largeur et limité la hauteur pour éviter les débordements, et mis une hauteur min pour être sûre que ça cache bien tout le revelio. Puis le fond noir, l'opacité à zéro pour que les sous-forums ne soient pas visibles, et enfin l'effet de transition sur l'opacité.

Code:

.sousforums {
    width: 125px;
    max-height: 80px;
    min-height: 30px;
    overflow: auto;
    background: black;
    opacity: 0;
    transition: opacity 1s ease;
}

- Retrouve ce passage dans le template (au niveau de l'affichage des sous-forums x)) :

Code:

<td class="row3 over deco_sujet" align="center" valign="middle" height="50">
            <div style="width:200px;"><span id="subforums">

Un id ne doit être présent qu'UNE SEULE FOIS sur une page,  id="subforums" ici ne sert à rien puisque ce span va apparaitre pour chaque forum des catégories ^^". Pour l'utiliser, il faut donc mettre une class à la place d'un id :

Code:

<td class="row3 over deco_sujet" align="center" valign="middle" height="50">
            <div style="width:200px;"><span class="subforums">

- On va utiliser ce span pour appliquer la propriété :hover : ajoute ce code dans ton css :

Code:

.subforums {
    width: 150px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

j'ai fixé la taille de façon à ce que ça soit à peut près la taille de l'image de fond, table-cell et vertical-align servent à ce que le texte reste toujours centré verticalement ^^

- enfin, ajoute ce code dans ton css pour que les sous-forums apparaissent au passage de la souris :

Code:

.subforums:hover div.sousforums {
    opacity: 1;
    transition: opacity 1s ease;
}

...
Si je n'ai rien oublié, ça devrait fonctionner ^^"

[Loü]

Han encore toi, je suis pourrie gâtée  

Par contre j'ai tout suivi comme indiqué mais l'image ne bouge pas au survol  

[MlleAlys]

parce que tu n'as pas suivi exactement comme j'ai dit mais tu as ajouté les propriétés de .sousforums à un css que tu avais déjà .sousforums a, non ? ^^" Ce n'est pas la même chose, .sousforums vise toute la div et son contenu, alors que .sousforums a ne vise que les liens à l'intérieur... Et, du coup, le code suivant ne s'applique pas à la même chose et ça ne fonctionne pas xP

Essaye de faire exactement comme j'ai mis, d'après ce que j'ai vu il n'y a pas à fusionner plusieurs codes du css, mais bien à les ajouter comme nouveaux codes

[Loü]

Autant pour moi, j'avais fait une erreur. Tout fonctionne très bien, mille merci !   
Bonne continuation à toi, je passe en résolu !

Edit : C'était bien le problème lol  

[MlleAlys]

de rien xD