Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Le deal à ne pas rater :
Display Star Wars Unlimited Ombres de la Galaxie : où l’acheter ?
Voir le deal

 

 Description de la catégorie cachée sous l'image et visible au survol de celle-ci

Aller en bas 
AuteurMessage
Sky
modo
Sky


Messages : 34
Date d'inscription : 12/10/2013
Age : 41
Localisation : do brazil

Description de la catégorie cachée sous l'image et visible au survol de celle-ci Empty
MessageSujet: Description de la catégorie cachée sous l'image et visible au survol de celle-ci   Description de la catégorie cachée sous l'image et visible au survol de celle-ci EmptyLun 27 Oct - 7:33


Rappel:
P.A -->  Affichage --> Couleurs --> (onglet) Feuille de style CSS.

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    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;
}
.cate:hover .cate_img
{
margin-left: 400px;
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;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  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à.


Code:

<div class="cate"><div class="cate_img"><img src="http://i166.photobucket.com/albums/u106/chidori-chan_01/onakiri.png" /></div><div class="cate_description">Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.</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 400x120 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 Wink

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

Merci
Sky
Revenir en haut Aller en bas
https://skydesign.kanak.fr
 
Description de la catégorie cachée sous l'image et visible au survol de celle-ci
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Exemple de réglement sous copyright !!!
» Catégorie personnalisé :

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Webdesign :: Codage Css3-
Sauter vers: