[Xooit] Description - effet hover

Sous ce nom très énigmatique se cache quelque chose de très simple que vous allez pouvoir apprécier sur mon forum de test Xooit. Cliquez ici, jeunes padawans.

Vous avez compris le principe ? Cool. Maintenant, place aux codes. N'oubliez pas de créditer Never-Utopia si vous utilisez mon travail


Tout d'abord, il va falloir modifier un template, celle qui répond au doux nom de index_body. Dans ce template, vous allez chercher la  charmante balise

Code:

<style>

et coller, juste en-dessous, le code suivant.

Code:

.description
{
  display: block;
  width: 400px; /*Largeur de votre image*/
  margin: auto;
  height: 180px; /*Hauteur de votre image*/
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 400px; /*Largeur*/
  height: 180px;  /*Hauteur*/
  overflow: auto;
  background-color: #FFFFFF; /*Couleur de l'arrière-plan de la description*/
  font-size: 14px;
  font-family:'Georgia';
  color: #3E352E;
  text-align:center;
  padding:0px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

Vous l'avez remarqué, il s'agît du code CSS. Et dit qui dit Code CSS dit ennuis garantis balisage HTML  !

Il est assez simple malgré quelques subtilités. Vous vous rendrez bientôt compte que, sur Xooit, le plus compliqué, ce ne sont pas les codes, c'est de savoir où les mettre. Je vous souhaite donc beaucoup de courage pour trouver le menu "Sous Forums" si vous démarrez sur cette plateforme.
La suite coule de source. Il faut modifier la description du sous-forum et y insérer ceci :

Code:

<div class="description"><div style="display: block; text-align: justify; width: 400px; height: 180px; background: url(http://i.imgur.com/minQVys.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 380px; height: 160px; padding: 10px;">Insérez la description de votre catégorie ici, les coupaings !</div></div></div></div>

Remplacez le lien par votre image, bien évidemment. J'attire votre attention sur les dimensions, et surtout sur cette petite chose qui, si vous ne la remarquez, pourrait vous faire vomir de toutes les couleurs.

Code:

padding: 10px;

Ceci signifie que en haut, à droite, en bas et à gauche de votre cadre, il y aura une marge intérieure ! SO, dans les dimensions juste avant...

Code:

width: 380px; height: 160px;

On enlève 20px à la hauteur, et 20px à la largeur. Faîtes bien attention à ça si vous changez les dimensions .
Enregistrez le tout et allez admirer votre boulow !

Voilou, j'espère avoir été clair.
Merci de ne pas copier ce tutoriel qui est mien, et n'oubliez pas le crédit à N-U en cas d'utilisation.

Merci!

Pile ce que je cherchais °°
Merci (:

merci

Merci à toi

merci

Merci pour le partage, c'est bien utile !

Merci.

Merci pour ce partage ♥

Meurci ~

Bonjour, merci pour ce partage !

Merci

merci ! :hover

merciiiiiiii   

Merci =)

C'est génial ** Merci !

Merci

merciiiii ^^

Trop chouette ! *-*

Thanx

Super, merci ! :)

super! merci !! ^o^

Merci !

Merci

merci beaucoup