AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-14%
Le deal à ne pas rater :
Apple AirPods Pro
239 € 279 €
Voir le deal

    [CSS3] Catégories aux descriptions cachés derrière l'illustration

    Sparrow-style
    Sparrow-style
    FémininAge : 35Messages : 32049

    le Lun 9 Jan 2012 - 22:05

    Rappel du premier message :

    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.
    Mon explication est encore plus floue que mon titre ? Bon XD Un petit aperçu aidera dans ce cas là :

    >>> lien aperçu <<<

    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: 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à. 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="http://2img.net/i/fa/pbucket.gif" /></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

    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 14:09, édité 2 fois



    sign
    artic marteen
    artic marteen
    FémininAge : 27Messages : 22

    le Ven 16 Mai 2014 - 16:23

    meeeerci



    Words are flying out like endless rain into a paper cup, they slither while they pass, they slip away across the universe. Pools of sorrow, waves of joy are drifting through my open mind, possessing and caressing me.   SEE YOU AT THE BITTER END. ytb
    Jigsaw.
    Jigsaw.
    FémininAge : 29Messages : 19

    le Ven 16 Mai 2014 - 16:53

    Merci !
    Lime
    Lime
    FémininAge : 24Messages : 32

    le Ven 16 Mai 2014 - 23:56

    Merci. ô/
    Patapou
    Patapou
    FémininAge : 20Messages : 15

    le Sam 17 Mai 2014 - 19:10

    Merci
    SNMitsuki
    SNMitsuki
    FémininAge : 22Messages : 63

    le Sam 17 Mai 2014 - 20:59

    Merci :DD



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 2 250032Sanstitre1
    Nessaleth
    Nessaleth
    FémininAge : 29Messages : 52

    le Dim 18 Mai 2014 - 19:03

    Merci !
    Moona Neko
    Moona Neko
    FémininAge : 25Messages : 75

    le Dim 18 Mai 2014 - 19:11

    Merci !
    LightGlace
    LightGlace
    FémininAge : 27Messages : 43

    le Mar 20 Mai 2014 - 16:31

    wow c'est ce que je cherchais depuis des lustres ! merci !
    isobel.
    isobel.
    FémininAge : 23Messages : 20

    le Mar 20 Mai 2014 - 18:26

    Merciii :)
    Yser
    Yser
    FémininAge : 22Messages : 46

    le Mar 20 Mai 2014 - 22:08

    Merchi énormément ! Cela fait un moment que je cherche comment faire !
    Sue Sheeran
    Sue Sheeran
    FémininAge : 21Messages : 27

    le Mer 21 Mai 2014 - 15:44

    merci :3
    Capouccino
    Capouccino
    FémininAge : 22Messages : 204

    le Mer 21 Mai 2014 - 21:22

    Merci chef *^*



    "Espérer l'inespérable c'est croire en l'impossible."
    Ahila
    Ahila
    FémininAge : 26Messages : 107

    le Jeu 22 Mai 2014 - 19:28

    Exactement ce que je cherchais, merci beaucoup!
    Irys
    Irys
    FémininAge : 30Messages : 145

    le Mer 28 Mai 2014 - 18:54

    Comme je me rappelle plus le code et qu'il y a eu un délestage, je repasse par ici. *-*

    Merci encore Captain <3




    Waht is your name?
    avatar
    Lyly
    FémininAge : 28Messages : 18

    le Mer 28 Mai 2014 - 22:46

    Merci beaucoup *o*
    Sunn
    Sunn
    MasculinAge : 25Messages : 24

    le Jeu 29 Mai 2014 - 0:05

    Michi :)
    Risa
    Risa
    FémininAge : 31Messages : 252

    le Ven 30 Mai 2014 - 19:43

    Très utile, merci !
    Méandre.
    Méandre.
    FémininAge : 22Messages : 95

    le Sam 31 Mai 2014 - 21:36

    Merci !
    Jull421
    Jull421
    FémininAge : 25Messages : 141

    le Mar 3 Juin 2014 - 2:53

    Merci



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 2 140228025614860943
    Nearween
    Nearween
    FémininAge : 21Messages : 213

    le Mar 3 Juin 2014 - 17:40

    Merci pour le code ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 2 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    benficagirl
    benficagirl
    FémininAge : 34Messages : 412

    le Ven 6 Juin 2014 - 21:22

    J'adore beaucoup =).
    Shiwaii
    Shiwaii
    MasculinAge : 31Messages : 111

    le Dim 8 Juin 2014 - 4:23

    Merci (:
    mini-mimi
    mini-mimi
    FémininAge : 23Messages : 75

    le Jeu 12 Juin 2014 - 9:31

    merci :)
    Eleania Madena
    Eleania Madena
    FémininAge : 23Messages : 89

    le Jeu 12 Juin 2014 - 9:43

    C'est exactement ce que je cherchais merci !




    Ukrysis
    Ukrysis
    FémininAge : 23Messages : 64

    le Jeu 12 Juin 2014 - 15:41

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Lun 1 Juin 2020 - 14:41