AccueilFAQRechercherMembresGroupesS'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.


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

    Okhmhaka
    Okhmhaka
    FémininAge : 34Messages : 31851

    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://illiweb.com/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



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Unchai10
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Sam 26 Juil 2014 - 14:13

    Merci du partage
    Chocolakato
    Chocolakato
    FémininAge : 29Messages : 796

    le Sam 26 Juil 2014 - 14:19

    Il me semblait avoir déjà remercié pour celui là, mais qu'à cela ne tienne !
    MERCI !



    Dy'Strich
    Dy'Strich
    FémininAge : 21Messages : 14

    le Lun 28 Juil 2014 - 18:52

    Très joli !
    Luna_Rakuen
    Luna_Rakuen
    FémininAge : 26Messages : 79

    le Mar 29 Juil 2014 - 10:46

    J'espère que ça va marcher.. =X
    Demoniall
    Demoniall
    FémininAge : 18Messages : 74

    le Mar 29 Juil 2014 - 18:01

    Merci bien !
    InkBoy
    InkBoy
    MasculinAge : 26Messages : 66

    le Mer 30 Juil 2014 - 14:36

    MErci pour cette astuce ! Wink



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 351tqox
    Kora
    Kora
    FémininAge : 17Messages : 45

    le Mer 30 Juil 2014 - 15:43

    miiiiici ♥
    Laps~solutE
    Laps~solutE
    FémininAge : 36Messages : 74

    le Jeu 31 Juil 2014 - 15:08

    Superbe !
    J'adore, merci beaucoup  :love: 



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Ban_sl10
    Par notre bon Captain, merci *-* .
    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 0712270256061917640
    Dastan
    Dastan
    MasculinAge : 35Messages : 111

    le Ven 1 Aoû 2014 - 13:41

    Merci!
    Dadash_Pearl
    Dadash_Pearl
    FémininAge : 27Messages : 40

    le Ven 1 Aoû 2014 - 13:49

    Merci Very Happy
    Tyarra
    Tyarra
    FémininAge : 19Messages : 73

    le Sam 2 Aoû 2014 - 17:24

    Merci pour le codage ! Very Happy



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 64385520JR
    Zappy
    Zappy
    FémininAge : 19Messages : 55

    le Dim 3 Aoû 2014 - 15:58

    Merci
    daelan450
    daelan450
    MasculinAge : 26Messages : 5

    le Dim 3 Aoû 2014 - 18:20

    Merci !
    Mikasa
    Mikasa
    FémininAge : 21Messages : 162

    le Lun 4 Aoû 2014 - 0:38

    merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Miksa210
    Signa:
    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Draco10
    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Mikasa11
    Boou
    Boou
    FémininAge : 26Messages : 50

    le Mar 5 Aoû 2014 - 0:20

    Merci beaucoup :)
    EAVENN
    EAVENN
    FémininAge : 23Messages : 162

    le Mar 5 Aoû 2014 - 7:19

    Merci pour cette superbe astuce !
    PLOIM
    PLOIM
    FémininAge : 21Messages : 52

    le Mar 5 Aoû 2014 - 13:53

    Merci !
    warning.sign
    warning.sign
    FémininAge : 28Messages : 58

    le Mar 5 Aoû 2014 - 15:29

    merci *o*
    Afterglow
    Afterglow
    FémininAge : 23Messages : 138

    le Mer 6 Aoû 2014 - 16:59

    Merci pour le partage  :cow: 



    How do you get up from an all time low?
    Yovoed
    Yovoed
    FémininAge : 19Messages : 55

    le Ven 8 Aoû 2014 - 15:42

    Merci ^^
    avatar
    Ge.
    FémininAge : 29Messages : 21

    le Dim 10 Aoû 2014 - 12:37

    Merci du partage :)
    avatar
    stefansalvatore
    MasculinAge : 23Messages : 17

    le Dim 10 Aoû 2014 - 15:28

    merci :)
    Cola
    Cola
    FémininAge : 20Messages : 81

    le Mar 12 Aoû 2014 - 16:14

    Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 5 Signa_11
    Bzzzz
    Bzzzz
    FémininAge : 35Messages : 86

    le Jeu 14 Aoû 2014 - 14:27

    Très utile, merci du partage
    Blue Star
    Blue Star
    FémininAge : 20Messages : 30

    le Jeu 14 Aoû 2014 - 14:33

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mer 17 Juil 2019 - 12:18