Sky modo
Messages : 34 Date d'inscription : 12/10/2013 Age : 41 Localisation : do brazil
| Sujet: Description de la catégorie cachée sous l'image et visible au survol de celle-ci Lun 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
| |
|