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 : -17%
Continental Edison TV QLED 55” (139 cm) UHD 4K ...
Voir le deal
299.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
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Ven 15 Aoû 2014 - 14:52

    Merci !
    louha
    louha
    FémininAge : 37Messages : 219

    Dim 17 Aoû 2014 - 16:31

    MErci **
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Lun 18 Aoû 2014 - 0:15

    C'est super merci !^^
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Lun 18 Aoû 2014 - 22:27

    Merciiii



    YOU HELLA SAVED MY LIFE
    - chloe price
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Mar 19 Aoû 2014 - 15:02

    thanks



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 6 Btqy
    smily
    smily
    FémininAge : 25Messages : 66

    Mer 20 Aoû 2014 - 20:09

    Merci !
    Chanira
    Chanira
    FémininAge : 27Messages : 18

    Jeu 21 Aoû 2014 - 15:07

    Merciiii c'est ce que je cherchais (partout je ne trouvais que des fondus x) mais l'image coulissante c'est pile ce qu'il me fallait) ! <3
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 25Messages : 304

    Ven 22 Aoû 2014 - 14:53

    Merci ! o/ ♥



    Just want to be yours.
    Filou
    Filou
    FémininAge : 33Messages : 162

    Sam 23 Aoû 2014 - 22:13

    Thank you :3
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 45Messages : 92

    Lun 25 Aoû 2014 - 1:11

    merci du partage
    Sachikou
    Sachikou
    FémininAge : 25Messages : 48

    Jeu 28 Aoû 2014 - 3:21

    Trop cool ! :) Merciiii !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 6 Signa111
    Frosty Blue
    Frosty Blue
    FémininAge : 28Messages : 162

    Jeu 28 Aoû 2014 - 13:53

    Merci
    Dydy
    Dydy
    FémininAge : 34Messages : 493

    Jeu 28 Aoû 2014 - 16:06

    merci du partage!



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 6 27978_signature_never_utopia_dydy_2
    avatar
    Alancar
    MasculinAge : 27Messages : 57

    Jeu 28 Aoû 2014 - 16:28

    Merci beaucoup !
    Rudein
    Rudein
    FémininAge : 28Messages : 87

    Jeu 28 Aoû 2014 - 21:49

    Merci, c'est exactement ce que je cherchais o/
    missphan
    missphan
    FémininAge : 41Messages : 156

    Ven 29 Aoû 2014 - 14:34

    Ca va m'aider à bien personnaliser merci
    Poké_Eievui
    Poké_Eievui
    MasculinAge : 23Messages : 34

    Ven 29 Aoû 2014 - 15:21

    merci
    Kendall
    Kendall
    FémininAge : 32Messages : 118

    Dim 31 Aoû 2014 - 16:39

    Merchii =3