AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Manga Chainsaw Man : où acheter le Tome 17 ...
Voir le deal
19.99 €

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

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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
    Emy Liddell
    Emy Liddell
    FémininAge : 31Messages : 29

    Mer 17 Sep 2014 - 10:15

    merci : 33



    Morphine.
    Morphine.
    FémininAge : 33Messages : 41

    Ven 19 Sep 2014 - 18:02

    merci ! :)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 30st6
    LHOOQ
    LHOOQ
    MasculinAge : 31Messages : 20

    Mar 23 Sep 2014 - 23:59

    Merci cheers
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Sam 27 Sep 2014 - 20:09

    Merci



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 I3k3
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Sam 27 Sep 2014 - 20:09

    waaa merci =)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 I3k3
    Shaolan
    Shaolan
    MasculinAge : 32Messages : 121

    Lun 29 Sep 2014 - 9:20

    Merci beaucoup !
    avatar
    NamPearl
    FémininAge : 27Messages : 40

    Mer 8 Oct 2014 - 19:15

    Merci
    Roxanne.R
    Roxanne.R
    FémininAge : 31Messages : 6

    Jeu 9 Oct 2014 - 15:23

    Merci !
    Draly
    Draly
    FémininAge : 31Messages : 119

    Jeu 9 Oct 2014 - 16:56

    Merci.:p
    Lilie
    Lilie
    FémininAge : 40Messages : 190

    Ven 10 Oct 2014 - 16:12

    Ah oui ça m'intéresse :)
    Shadaan
    Shadaan
    FémininAge : 31Messages : 80

    Ven 10 Oct 2014 - 21:56

    Merci *-*



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 897455signnu
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 206

    Dim 12 Oct 2014 - 14:00

    Thank's :)
    Yuuna
    Yuuna
    FémininAge : 28Messages : 19

    Dim 12 Oct 2014 - 15:53

    Thks !
    Anonymous
    Invité

    Lun 13 Oct 2014 - 7:42

    Merci d'avance pour ce partage.
    SEVAN
    SEVAN
    FémininAge : 31Messages : 46

    Mar 14 Oct 2014 - 0:02

    merci
    Shy
    Shy
    MasculinAge : 29Messages : 126

    Mar 14 Oct 2014 - 22:31

    Wow, c'est super ! Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 1413067250-signature37-1
    Clémentine
    Clémentine
    FémininAge : 31Messages : 223

    Mer 15 Oct 2014 - 18:09

    Merci ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 9w9t
    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Jeu 16 Oct 2014 - 13:32

    Merci, je prends ^^'.

    Par contre, comment on fait pour s'en servir justement pour dissimuler non les catégories, mais les liens de ces dernières ?
    Wilster
    Wilster
    FémininAge : 29Messages : 31

    Jeu 16 Oct 2014 - 20:40

    merci ^^
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Ven 17 Oct 2014 - 18:46

    Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 7 Kit_si10
    avatar
    Del
    MasculinMessages : 110

    Ven 17 Oct 2014 - 22:22

    Merci.



    « Run you clever boy and remember... »
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Sam 18 Oct 2014 - 12:50

    J'aime beaucoup, comme tout ce que tu fais ! Merci
    Ailou ~3
    Ailou ~3
    FémininAge : 24Messages : 61

    Sam 18 Oct 2014 - 23:08

    Merci du partage !
    Nevr0z
    Nevr0z
    FémininAge : 35Messages : 74

    Dim 19 Oct 2014 - 21:21

    Merci :)
    Meylah
    Meylah
    FémininAge : 22Messages : 60

    Lun 20 Oct 2014 - 11:09

    Merci c'est parfait !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:23