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 : -38%
Ecran PC gaming 23,8″ – ACER KG241Y P3bip ...
Voir le deal
99.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
    Géranium
    Géranium
    FémininAge : 24Messages : 56

    Dim 13 Nov 2016 - 19:30

    MERCI ! Cool
    Patou972
    Patou972
    FémininAge : 45Messages : 181

    Jeu 24 Nov 2016 - 14:40

    merci beaucoup
    Kiwix
    Kiwix
    FémininAge : 29Messages : 68

    Ven 25 Nov 2016 - 17:49

    Merciiiii
    (Pseudonyme)
    (Pseudonyme)
    MasculinAge : 26Messages : 2

    Mar 29 Nov 2016 - 3:01

    Je vais sûrement me servir de ça, merci Very Happy !
    November
    November
    MasculinAge : 24Messages : 50

    Dim 4 Déc 2016 - 10:47

    merci beaucoup :'3
    VincentWeever
    VincentWeever
    MasculinAge : 27Messages : 57

    Dim 1 Jan 2017 - 19:12

    Merci du partage
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Lun 9 Jan 2017 - 2:34

    merciii
    DDril
    DDril
    MasculinAge : 40Messages : 34

    Lun 9 Jan 2017 - 21:40

    Merci.
    Sylfire
    Sylfire
    MasculinAge : 24Messages : 1

    Dim 15 Jan 2017 - 17:12

    Test x3 Marchi
    Kinst.MP
    Kinst.MP
    FémininAge : 25Messages : 53

    Lun 16 Jan 2017 - 12:39

    Très utile, même pas forcément que pour les catégories c'est cool comme effet! ^^ Merci :3
    Djeina
    Djeina
    FémininAge : 28Messages : 233

    Jeu 19 Jan 2017 - 15:27

    Merci du partage ^^
    Sosei
    Sosei
    FémininAge : 30Messages : 13

    Jeu 19 Jan 2017 - 23:36

    Merci =D
    lounythithi
    lounythithi
    MasculinAge : 29Messages : 14

    Ven 20 Jan 2017 - 0:53

    Merciiii
    Marec
    Marec
    MasculinAge : 29Messages : 21

    Ven 20 Jan 2017 - 11:22

    Merci :)
    didoum
    didoum
    MasculinAge : 39Messages : 92

    Ven 20 Jan 2017 - 19:42

    Merci beaucoup



    css3 - [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 19 882883sign
    Wavy
    Wavy
    FémininAge : 23Messages : 39

    Ven 27 Jan 2017 - 19:46

    Merci !
    Meriadoc
    Meriadoc
    MasculinAge : 35Messages : 12

    Ven 27 Jan 2017 - 23:37

    Merci beaucoup pour ce tuto !
    Utopiste
    Utopiste
    FémininAge : 39Messages : 9

    Dim 29 Jan 2017 - 19:06

    Merci de l'explication.
    Gieve
    Gieve
    FémininAge : 35Messages : 123

    Dim 5 Fév 2017 - 21:54

    Merci beaucoup c'est magnifique **
    Blanche Neige
    Blanche Neige
    FémininAge : 30Messages : 9

    Lun 6 Fév 2017 - 16:47

    Merci! :han:

    Ça va venir mettre la petite touche qui manquait!
    sturdya
    sturdya
    FémininAge : 26Messages : 34

    Lun 6 Fév 2017 - 23:42

    merci
    Scythe
    Scythe
    FémininAge : 34Messages : 41

    Mar 7 Fév 2017 - 13:10

    Super, merci !
    Lisou
    Lisou
    FémininAge : 24Messages : 351

    Ven 10 Fév 2017 - 20:27

    merciii :)
    Jiragi
    Jiragi
    FémininAge : 24Messages : 22

    Sam 11 Fév 2017 - 18:14

    merci !
    AshVS
    AshVS
    FémininAge : 29Messages : 11

    Lun 13 Fév 2017 - 13:28

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 6:51