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 4 Unchai10
    teck
    teck
    MasculinAge : 28Messages : 63

    le Ven 4 Juil 2014 - 14:48

    merci



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 Signa113
    Plume'
    Plume'
    FémininAge : 21Messages : 166

    le Sam 5 Juil 2014 - 12:01

    Merci !
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 19Messages : 59

    le Sam 5 Juil 2014 - 12:13

    merci ^^
    Lenalee
    Lenalee
    FémininAge : 30Messages : 36

    le Sam 5 Juil 2014 - 13:08

    merci beaucoup pour ce LS
    skyfighter
    skyfighter
    MasculinAge : 36Messages : 352

    le Lun 7 Juil 2014 - 1:54

    merci ^^




    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 Signat10
    SatoruMasao
    SatoruMasao
    MasculinAge : 25Messages : 23

    le Lun 7 Juil 2014 - 14:55

    I love you!
    Anonymous
    Invité

    le Lun 7 Juil 2014 - 21:43

    Re-merci ^^
    Anonymous
    Invité

    le Sam 12 Juil 2014 - 17:42

    Merci beaucoup !
    The Shiya
    The Shiya
    FémininAge : 29Messages : 77

    le Sam 12 Juil 2014 - 22:18

    Merci o/



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 Test10
    lΔω
    lΔω
    FémininAge : 21Messages : 105

    le Dim 13 Juil 2014 - 17:11

    merci
    Shuu-Shuu
    Shuu-Shuu
    FémininAge : 23Messages : 199

    le Lun 14 Juil 2014 - 1:08

    merci Wink
    Link
    Link
    MasculinAge : 22Messages : 1367

    le Lun 14 Juil 2014 - 3:24

    thx



    De retour pour la nouvelle année. =D.
    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 Gerard_Icon_by_KingsJoy_[CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 9f1d6eaf376d8cd3f94012bc275d37f2
    Lunara
    Lunara
    FémininAge : 32Messages : 95

    le Mar 15 Juil 2014 - 12:51

    merci pour ce partage
    MlleNamiya
    MlleNamiya
    FémininAge : 24Messages : 35

    le Mar 15 Juil 2014 - 16:08

    Merci o/
    Yogurt01
    Yogurt01
    MasculinAge : 29Messages : 79

    le Sam 19 Juil 2014 - 1:41

    Merci
    Zuiichi
    Zuiichi
    MasculinAge : 26Messages : 120

    le Dim 20 Juil 2014 - 13:34

    merci



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 4 Zuii
    Nalyana
    Nalyana
    FémininAge : 22Messages : 26

    le Lun 21 Juil 2014 - 12:31

    J'adore, merci beaucoup !
    Civin
    Civin
    FémininAge : 22Messages : 11

    le Lun 21 Juil 2014 - 17:06

    Jolie et pratique, merci du partage Very Happy
    Nahana Pinlane
    Nahana Pinlane
    FémininAge : 18Messages : 46

    le Lun 21 Juil 2014 - 19:44

    Merci :3
    Sachem
    Sachem
    FémininAge : 23Messages : 51

    le Mar 22 Juil 2014 - 1:50

    Merci !
    Keith Sanders
    Keith Sanders
    MasculinAge : 22Messages : 22

    le Mar 22 Juil 2014 - 12:34

    Merci pour ce tuto /D
    Ne2faly
    Ne2faly
    MasculinAge : 24Messages : 15

    le Mer 23 Juil 2014 - 2:30

    merci
    Milka
    Milka
    FémininAge : 31Messages : 112

    le Jeu 24 Juil 2014 - 12:03

    Merci bien :)
    Féhéla
    Féhéla
    FémininAge : 46Messages : 238

    le Jeu 24 Juil 2014 - 15:51

    Merci !
    Allison01
    Allison01
    FémininAge : 35Messages : 212

    le Sam 26 Juil 2014 - 0:35

    Superbe ^^ merci :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Oct 2019 - 16:43