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.


    [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 3 Unchai10
    Oror
    Oror
    FémininAge : 29Messages : 95

    le Jeu 12 Juin 2014 - 16:55

    merci !!! =)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 351490minion
    Hashirama
    Hashirama
    MasculinAge : 22Messages : 63

    le Jeu 12 Juin 2014 - 19:29

    thx
    Hatawai
    Hatawai
    FémininAge : 26Messages : 17

    le Jeu 12 Juin 2014 - 19:44

    Merci pour le tuto.
    Simple et pratique.
    Tsuki27
    Tsuki27
    FémininAge : 27Messages : 32

    le Ven 13 Juin 2014 - 20:09

    Oh mercii je voulais trop ça ! ♥



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

    - Joueuse RP sur MMORPG -
    Liberty Grim
    Liberty Grim
    FémininAge : 21Messages : 128

    le Ven 13 Juin 2014 - 20:24

    Merci !!! **
    avatar
    Licmac.
    FémininAge : 26Messages : 18

    le Sam 14 Juin 2014 - 2:00

    merci (:
    Amiko
    Amiko
    FémininAge : 28Messages : 51

    le Sam 14 Juin 2014 - 15:18

    Merci une fois encore !
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Dim 15 Juin 2014 - 16:21

    super utile merci
    LittleChan
    LittleChan
    FémininAge : 28Messages : 60

    le Lun 16 Juin 2014 - 6:21

    Thanks Wink



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 34ex18y
    Summeryoid
    Summeryoid
    FémininAge : 25Messages : 32

    le Lun 16 Juin 2014 - 11:34

    Merci pour ce tuto o/



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 539853pin
    Petite soeur
    Petite soeur
    FémininAge : 23Messages : 36

    le Lun 16 Juin 2014 - 17:59

    Merci pour le code ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 234348Sanstitre2
    avatar
    Aïda
    FémininAge : 24Messages : 35

    le Mer 18 Juin 2014 - 13:27

    merci
    Zélya
    Zélya
    FémininAge : 30Messages : 190

    le Jeu 19 Juin 2014 - 11:26

    bonjour, j'adore cette forme, je te remercie de mettre ce codage pour tous.
    Je me permets de le prendre



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 891727signaNanmoue
    Itachi28
    Itachi28
    FémininAge : 22Messages : 54

    le Ven 20 Juin 2014 - 13:57

    Merci!
    Mordiern
    Mordiern
    FémininAge : 42Messages : 282

    le Sam 21 Juin 2014 - 12:54

    Merci d'avance
    ewin
    ewin
    MasculinAge : 20Messages : 5

    le Dim 22 Juin 2014 - 0:38

    Genialisime Very Happy
    ewin
    ewin
    MasculinAge : 20Messages : 5

    le Dim 22 Juin 2014 - 0:39

    Genialisime Very Happy
    Kyandi
    Kyandi
    FémininAge : 20Messages : 157

    le Dim 22 Juin 2014 - 14:20

    Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 1401912845-sans-titre-8


    elsa2607
    elsa2607
    FémininAge : 21Messages : 81

    le Dim 22 Juin 2014 - 22:10

    Parfait juste ce que je cherchais merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 Stvale10
    P'tit loup
    P'tit loup
    MasculinAge : 36Messages : 447

    le Mar 24 Juin 2014 - 16:07

    re merciiii ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 30xivrd
    Enko
    Enko
    Age : 30Messages : 56

    le Ven 27 Juin 2014 - 17:32

    Je suis curieuse de voir la technique que tu utilise pour cela. J'ai mon idée mais je suis curieuse :)
    Asaliah
    Asaliah
    FémininAge : 34Messages : 120

    le Ven 27 Juin 2014 - 18:57

    Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 Signu10
    Inoue Musaki
    Inoue Musaki
    FémininAge : 30Messages : 147

    le Sam 28 Juin 2014 - 18:53

    merci
    skaera22
    skaera22
    MasculinAge : 24Messages : 72

    le Dim 29 Juin 2014 - 17:39

    ouah :)
    Bruleciel
    Bruleciel
    FémininAge : 26Messages : 934

    le Lun 30 Juin 2014 - 17:02

    Un grand merci pour ce libre service, dont je pense qu'il va m'être utile  Very Happy 



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 Disney10 [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 3 710aa410
    Je brûle le ciel
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Oct 2019 - 18:09