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 :
Cartes Pokémon EV8.5 : coffret dresseur ...
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
    Zayshin
    Zayshin
    FémininAge : 33Messages : 42

    Lun 20 Fév 2017 - 21:34

    Merci beaucoup!!!
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Jeu 9 Mar 2017 - 0:55

    merci du partage
    Örmée
    Örmée
    MasculinAge : 37Messages : 139

    Mer 22 Mar 2017 - 22:13

    Merci :)
    Ornicar
    Ornicar
    MasculinAge : 28Messages : 37

    Lun 8 Mai 2017 - 20:58

    Thanks =D
    ptite_perle
    ptite_perle
    FémininAge : 61Messages : 128

    Mar 9 Mai 2017 - 7:34

    Merci pour ce tuto :)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 20 Signature
    Hakuna Patata
    Hakuna Patata
    FémininAge : 32Messages : 73

    Lun 22 Mai 2017 - 20:06

    C'est chouette, je me demandais souvent comment faire ça. Merci ! :)
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Mar 6 Juin 2017 - 19:21

    Oh sympa! Merci beaucoup! *-* et bravo!
    Louna Luna
    Louna Luna
    FémininAge : 29Messages : 147

    Jeu 8 Juin 2017 - 20:21

    Super code merci !
    missp
    missp
    FémininAge : 34Messages : 26

    Mer 21 Juin 2017 - 17:20

    Merci <3
    Kanae
    Kanae
    FémininAge : 32Messages : 354

    Ven 23 Juin 2017 - 20:13

    Merci

    Ayael
    Ayael
    FémininAge : 29Messages : 598

    Dim 2 Juil 2017 - 17:47

    Toujours incontournable !
    saoune972
    saoune972
    FémininAge : 26Messages : 18

    Ven 7 Juil 2017 - 1:09

    likee
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 23Messages : 152

    Lun 10 Juil 2017 - 12:25

    Merci beaucoup ! Very Happy
    Kaushui
    Kaushui
    FémininAge : 26Messages : 19

    Mer 12 Juil 2017 - 19:00

    Merci !
    Mephitiques
    Mephitiques
    MasculinAge : 25Messages : 29

    Mar 18 Juil 2017 - 19:19

    merci
    Loo
    Loo
    FémininAge : 30Messages : 22

    Lun 28 Aoû 2017 - 2:13

    Merci beaucoup pour le partage ! ^^
    Alborio
    Alborio
    MasculinAge : 25Messages : 37

    Dim 3 Sep 2017 - 11:11

    C'est parfait !
    Démo
    Démo
    FémininAge : 25Messages : 57

    Dim 17 Sep 2017 - 23:40

    merci!
    Mordred Ghost
    Mordred Ghost
    FémininAge : 38Messages : 74

    Mer 4 Oct 2017 - 14:48

    La curiosité est un vilain défaut
    Merci Wink
    Mahogany
    Mahogany
    FémininAge : 31Messages : 54

    Lun 16 Oct 2017 - 17:25

    Merci infiniment!
    Lilandrile
    Lilandrile
    FémininAge : 38Messages : 60

    Mar 17 Oct 2017 - 16:46

    Merci pour ce code :)
    Mojo
    Mojo
    FémininAge : 24Messages : 4

    Ven 20 Oct 2017 - 19:13

    merci beaucoup !
    Banshee Quinn
    Banshee Quinn
    FémininAge : 26Messages : 23

    Dim 22 Oct 2017 - 0:23

    Merci ♥
    alysszen
    alysszen
    FémininAge : 28Messages : 19

    Ven 3 Nov 2017 - 11:45

    Merci !
    Insane.
    Insane.
    FémininAge : 26Messages : 83

    Mer 27 Déc 2017 - 14:19

    j'adore !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 10:01