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 : -30%
SSD interne 2To Lexar Play (avec dissipateur ...
Voir le deal
139.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
    Anonymous
    Invité

    Jeu 14 Juil 2016 - 10:02

    Merci pour ce code ! :)
    Anonymous
    Invité

    Jeu 14 Juil 2016 - 10:03

    Merci pour ce code ! :)
    Libellule
    Libellule
    FémininAge : 26Messages : 7

    Mer 20 Juil 2016 - 23:39

    Merci du partage, ça fait des semaines que je cherchais ce tuto ^^
    Ailla
    Ailla
    FémininAge : 25Messages : 32

    Ven 22 Juil 2016 - 15:16

    merci beaucoup ! Very Happy
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Dim 24 Juil 2016 - 19:18

    Je prends ! Merci ! ♥
    avatar
    GEnterZ
    MasculinAge : 26Messages : 63

    Mer 27 Juil 2016 - 16:33

    merci
    avatar
    Divas/Marion
    FémininAge : 25Messages : 44

    Sam 30 Juil 2016 - 0:38

    Merci.
    Pau
    Pau
    FémininAge : 34Messages : 37

    Dim 31 Juil 2016 - 19:48

    c'est super, merci !
    Bilandie
    Bilandie
    FémininAge : 28Messages : 24

    Mar 2 Aoû 2016 - 22:53

    Merci! ^^
    AlphaElis
    AlphaElis
    FémininAge : 29Messages : 9

    Sam 6 Aoû 2016 - 16:15

    Petit code sympa, je pense cependant le tester ailleurs que sur une catégorie par contre ; genre sur une page d'accueil.
    Merci beaucoup pour ce code~



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 18 1454708237-alphabanfofoaka. αelis


    Killjoy, ghost, and a lot of other thing~

    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Lun 15 Aoû 2016 - 22:29

    Merci beaucoup pour ce partage :ange:
    chocapiix59
    chocapiix59
    FémininAge : 31Messages : 23

    Mar 16 Aoû 2016 - 18:55

    Extra Very Happy merchii !
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Mar 16 Aoû 2016 - 23:10

    Ho merci



    Patricia :)
    Samiro
    Samiro
    MasculinAge : 28Messages : 52

    Sam 20 Aoû 2016 - 18:41

    merci
    Phoenix Elen
    Phoenix Elen
    FémininAge : 32Messages : 93

    Dim 28 Aoû 2016 - 2:04

    Oh ! c'est ce que je recherchais ! Merci beaucoup :)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 18 1u4i
    Nyroc
    Nyroc
    MasculinAge : 22Messages : 58

    Jeu 1 Sep 2016 - 7:29

    Merci ^^



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 18 1-3_mi10
    witm
    witm
    FémininAge : 30Messages : 51

    Sam 17 Sep 2016 - 2:47

    très utile merci
    Philo
    Philo
    FémininAge : 26Messages : 64

    Sam 17 Sep 2016 - 19:40

    Merci ca m'aide à progresser en codage :)
    Likau
    Likau
    MasculinAge : 30Messages : 353

    Lun 19 Sep 2016 - 15:38

    Hâte de voir ça, merci Very Happy
    Sestren
    Sestren
    Autre / Ne pas divulguerAge : 32Messages : 36

    Lun 19 Sep 2016 - 18:24

    Merci !
    Meeko
    Meeko
    MasculinAge : 31Messages : 32

    Mar 20 Sep 2016 - 5:48

    merci
    Wizzard
    Wizzard
    MasculinAge : 26Messages : 5

    Sam 24 Sep 2016 - 23:56

    Je suis curieux du résultat qu'il peut avoir alors je vais l'essayer ! Very Happy Merci beaucoup
    kazan
    kazan
    FémininAge : 107Messages : 13

    Mar 25 Oct 2016 - 16:07


    merci :aww:
    Darouine Lius
    Darouine Lius
    MasculinAge : 35Messages : 77

    Mer 26 Oct 2016 - 14:51

    merci
    La Sagesse
    La Sagesse
    FémininAge : 52Messages : 25

    Ven 4 Nov 2016 - 22:50

    Super, c'est exactement ce que je cherchais !

    Merci beaucoup.
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 21:46