|
| Image qui cache les descriptions de catégories Messages : 80
Date d'inscription : 08/05/2011
Age : 31
 Cha Grande prêtresse qui peut tout
Dossier personnel
Métier: Cupcake
Âge: Hibou !
 Sujet: Image qui cache les descriptions de catégories Jeu 21 Juin - 17:53 Merci Never Utopia <3 - Never Utopia a écrit:
Description de la catégorie cachée sous l'image et visible au survol de celle-ci
Derrière ce titre qui peut paraitre assez flou se trouve un petit effet réalisé uniquement en HTML & CSS3 qui consiste à mettre le texte descriptif d'une catégorie derrière l'image illustrant cell-ci, et au survol de l'image de faire apparaitre ce texte.
Plutôt sympa non ?
Si vous voulez installer ce système sur votre forum c'est très simple, je vous donne les codes à utiliser et je vous explique comment les utiliser, mais en contre partie, j'attends de vous que vous mettiez le lien de Never-Utopia quelque part en crédit sur votre page d'accueil, et ce de façon lisible (j'entends donc pas en police 4 quoi XD).
Je vous en remercie par avance, c'est la moindre des choses lorsque l'on utilise le travail des autres^^.
Le code CSS
Il est à placé dans votre feuille css de forum (Panneau d'admin > Affichage > Couleurs > (onglet) Feuille de style CSS).
- Code:
-
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */
.cate
{
width: 600px;
height: 150px;
overflow: hidden;
border: 2px solid #000000;
background-color: #ffffff;
}
.cate_img
{
position: relative;
z-index: 2;
width: 600px;
height: 150px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate:hover .cate_img
{
margin-left: 600px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate_description
{
position: relative;
z-index: 1;
width: 600px;
height: 150px;
margin-top: -150px;
text-align: justify;
font-size: 11px;
color: #8c8c8c;
padding: 2px;
overflow: auto;
}
Le code HTML
Il sera à mettre dans chaque descriptions de catégorie ou de forum où vous souhaitez mettre cet effet-là. Donc dans votre PA, lorsque vous créez/modifiez une catégorie ou un forum, c'est dans le cadre "description" qu'il faut mettre ce code. Pensez à activer l'html et non le BBcode par contre.
- Code:
-
<div class="cate"><div class="cate_img"><img src="URL IMAGE" /></div><div class="cate_description">DESCRIPTION DE LA CATEGORIE</div></div> <div style="clear: both;"></div>
L'adresse en début de code c'est bien sûr l'image, et le texte qui ressemble à du Latin c'est votre description.
ATTENTION :
Comme vous pourrez le constater, ce code est fait pour une image de 600x150 pixels. Mais il est évident que vous pouvez mettre une autre taille d'image (pas trop petite sinon votre description sera galère à lire...) mais il faudra changer les tailles indiquées dans le code CSS
Il va de soit que ce système peut être utilisé pour beaucoup d'autres choses, comme par exemple l'avatar du staff sur la PA qui au survol découvre la description de ce membre-là...
Quelle que soit l'utilisation, n'oubliez pas le crédit !
Le tutoriel a bien été adapté pour une image 600*150 comme le machin immonde et rose que j'ai utilisé pour l'exemple dans le sous-forum. Pour voir comment je l'ai intégré, regarde la partie description du sous-forum test  . Sinon, j'explique un peu les valeurs : - height et width tu les connais : c'est la taille de l'image. Toutes les valeurs dans le code qui sont les mêmes que ces deux valeurs sont à changer, il faut que ces valeurs soient donc toutes les mêmes (exemple : les margin-left).
- *transition sont la vitesse de déplacement de l'image. Plus tu mets un temps élevé, plus la vitesse est grande. Au contraire, plus la valeur est petite, moins c'est rapide.
- la partie .cat_description est là pour mettre en forme le texte, il faut que tu règles ça également, pour que ça concorde avec le reste.
- la partie .cat représente le fond de base, celui que tu auras sans l'image, et il fait partie des codes de base du forum donc il influence même les parties sur lesquelles tu ne vas pas appliquer l'image. Pense donc bien à le changer !
Il suffit que tu mettes le code css une seule fois dans la partie codage normalement. Le code html est super bien foutu, du coup il suffit que tu le répètes dans les descriptions des catégories que tu veux modifier. Amuses-toi bien ! <3 | | |
Messages : 80
Date d'inscription : 08/05/2011
Age : 31
Cha Grande prêtresse qui peut tout
Dossier personnel
Métier: Cupcake
Âge: Hibou !
Sujet: Re: Image qui cache les descriptions de catégories Jeu 21 Juin - 17:55 Ah, et j'ai pas testé quand ya des liens, fait le avec les catégories principales, t'as juste le code html à remettre dans les catégories, par contre l'image devra être impérativement de la même taille que celle de Partie test pour ici . ça ce change dans le code css. | |
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
|
Accueil
