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 à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
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
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 28 Nov 2015 - 18:14

    Merci !




    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 15 5qox
    Trisse
    Trisse
    FémininAge : 24Messages : 36

    Dim 29 Nov 2015 - 10:16

    mercii
    ChupabracaRope
    ChupabracaRope
    FémininAge : 22Messages : 40

    Mer 2 Déc 2015 - 14:26

    Thanks ♥
    BlackNight
    BlackNight
    MasculinAge : 36Messages : 90

    Dim 20 Déc 2015 - 20:21

    Merci
    Neya
    Neya
    FémininAge : 24Messages : 164

    Lun 21 Déc 2015 - 9:10

    Merki
    DeadlyRuby
    DeadlyRuby
    FémininAge : 24Messages : 40

    Mar 22 Déc 2015 - 20:22

    Merci beaucoup le rendu est très sympa. ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 15 15122001123111422113841857
    zbou
    zbou
    FémininAge : 29Messages : 83

    Jeu 24 Déc 2015 - 17:44

    Merci beaucoup !!
    avatar
    Peeves Leviosa
    MasculinAge : 23Messages : 15

    Ven 1 Jan 2016 - 10:49

    Oh c'est vraiment super comme effet! Est-il possible de le faire se décaler à droite, en haut ou en bas ?
    Elewen
    Elewen
    FémininAge : 23Messages : 22

    Dim 3 Jan 2016 - 13:21

    merci
    Anonymous
    Invité

    Ven 8 Jan 2016 - 20:13

    Bizarre, j'étais persuadé d'avoir déjà posté... O_o
    Océ
    Océ
    FémininAge : 49Messages : 363

    Sam 9 Jan 2016 - 22:07

    Il est très beau.

    Hancok
    Hancok
    FémininAge : 39Messages : 1466

    Dim 10 Jan 2016 - 11:35

    Merci pour ces codes ^^.




    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 15 A67g
    Mlle-C
    Mlle-C
    FémininAge : 29Messages : 20

    Lun 11 Jan 2016 - 1:49

    Merci beaucoup pour ce tuto
    avatar
    Drogba JR
    MasculinAge : 31Messages : 90

    Ven 15 Jan 2016 - 17:59

    merci
    Jadilita
    Jadilita
    FémininAge : 28Messages : 19

    Lun 18 Jan 2016 - 13:40

    thank you :)
    FrZ
    FrZ
    MasculinAge : 26Messages : 6

    Lun 18 Jan 2016 - 20:00

    Merci !! :)
    Rogue Titan
    Rogue Titan
    FémininAge : 29Messages : 53

    Ven 22 Jan 2016 - 11:25

    Merci !
    Ellen Lesley
    Ellen Lesley
    FémininAge : 109Messages : 79

    Dim 24 Jan 2016 - 4:45

    C'est génial ! Dommage que quand je l'utilise, ça n'affiche pas tout le texte et que les fins de phrases sont cachés
    VictoireL'ours
    VictoireL'ours
    FémininAge : 26Messages : 6

    Dim 24 Jan 2016 - 12:44

    Merci !
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Lun 1 Fév 2016 - 23:16

    Merci beaucoup
    Yukihyo
    Yukihyo
    MasculinAge : 26Messages : 98

    Lun 1 Fév 2016 - 23:37

    Merci
    Hungriph
    Hungriph
    MasculinAge : 34Messages : 8

    Jeu 4 Fév 2016 - 0:53

    Merci infiniment je pense que cela peut m'être très utile pour la création de mon forum ^^ si je l’utilise tu auras droit à ta place dans les crédits car j'adore vraiment le principe encore merci^^
    xLittleRainbow
    xLittleRainbow
    FémininAge : 29Messages : 23

    Lun 8 Fév 2016 - 22:34

    Thanks ^.^
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Mar 9 Fév 2016 - 11:47

    Merci!!
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Mer 17 Fév 2016 - 14:58

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 16:53