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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    [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
    Ozymandias
    Ozymandias
    MasculinAge : 25Messages : 44

    Mer 17 Fév 2016 - 19:22

    Merci
    LOUVE ☽
    LOUVE ☽
    FémininAge : 33Messages : 53

    Dim 21 Fév 2016 - 22:21

    Merci, c'est très sympa Very Happy
    Sapphire
    Sapphire
    FémininAge : 27Messages : 48

    Mer 24 Fév 2016 - 0:03

    Meerci !
    KTMiz
    KTMiz
    MasculinAge : 25Messages : 47

    Mer 24 Fév 2016 - 0:20

    merci



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 16 Kjod95_sick_religion
    Sophia
    Sophia
    FémininAge : 29Messages : 44

    Jeu 25 Fév 2016 - 13:20

    Très utile et pratique, merci !
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Sam 27 Fév 2016 - 10:34

    Merci beaucoup !! :love:
    Requiem
    Requiem
    MasculinAge : 31Messages : 21

    Dim 6 Mar 2016 - 14:05

    Merciii cheers
    Hynel
    Hynel
    MasculinAge : 25Messages : 16

    Ven 11 Mar 2016 - 15:30

    Merci Very Happy
    Necrolythia
    Necrolythia
    FémininAge : 36Messages : 580

    Sam 12 Mar 2016 - 10:41

    superrr merciiii



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 16 KKEVK8u
    Banhjo
    Banhjo
    MasculinAge : 26Messages : 76

    Dim 13 Mar 2016 - 4:06

    Bien Vu
    Thessia
    Thessia
    FémininAge : 34Messages : 78

    Mar 15 Mar 2016 - 21:30

    Merci beaucoup depuis le temps que je cherche à faire ça ^^



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    Unleash
    Unleash
    MasculinAge : 24Messages : 85

    Lun 21 Mar 2016 - 13:34

    ty
    Unleash
    Unleash
    MasculinAge : 24Messages : 85

    Lun 21 Mar 2016 - 13:35

    ty
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Mar 22 Mar 2016 - 20:27

    Merci
    Kimberlay *
    Kimberlay *
    FémininAge : 33Messages : 161

    Ven 25 Mar 2016 - 15:16

    Merci
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 35Messages : 71

    Dim 27 Mar 2016 - 15:44

    Owii je veux voir! *-*
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Dim 27 Mar 2016 - 22:55

    merci
    Kilda
    Kilda
    FémininAge : 43Messages : 73

    Mer 30 Mar 2016 - 9:41

    merci
    blomkvist
    blomkvist
    FémininAge : 33Messages : 44

    Jeu 31 Mar 2016 - 1:28

    merci du partage, je vais essayé si il est possible de faire cela non pas pour cacher une description mais pour cacher le bouton nouveau message,merciii du partage :love:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    Wolf Valley
    Wolf Valley
    FémininAge : 24Messages : 72

    Sam 2 Avr 2016 - 22:21

    Merci
    Susan Storm
    Susan Storm
    FémininAge : 44Messages : 78

    Dim 3 Avr 2016 - 21:34

    Merci !
    ldavidl
    ldavidl
    MasculinAge : 34Messages : 30

    Mar 5 Avr 2016 - 11:54

    C'est bien comme ca! MErci et bravo à toi!
    Ishyyn
    Ishyyn
    FémininAge : 28Messages : 90

    Sam 9 Avr 2016 - 18:31

    Merci :3
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Mer 13 Avr 2016 - 21:37

    Merci !
    Anonymous
    Invité

    Dim 17 Avr 2016 - 2:17

    Merci! Utile, et beau.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:26