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 :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
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
    Iliass
    Iliass
    MasculinAge : 32Messages : 24

    Sam 21 Mar 2015 - 14:17

    merc l'ami
    Iliass
    Iliass
    MasculinAge : 32Messages : 24

    Sam 21 Mar 2015 - 14:17

    merc l'ami
    Choko
    Choko
    FémininAge : 24Messages : 61

    Dim 22 Mar 2015 - 2:31

    Merci beaucoup ! ^-^
    Drill'
    Drill'
    FémininAge : 38Messages : 65

    Dim 22 Mar 2015 - 14:18

    Merci
    Luirio
    Luirio
    MasculinAge : 33Messages : 171

    Mer 25 Mar 2015 - 14:44

    ça me plait! ^^
    Luirio
    Luirio
    MasculinAge : 33Messages : 171

    Dim 29 Mar 2015 - 3:24

    J'ai personalisé ton code pour faire des images qui défilent a la verticale =) le résultat est juste trop génial =) merci beaucoup.
    Adèle
    Adèle
    FémininAge : 32Messages : 96

    Dim 29 Mar 2015 - 18:04

    Merci ♥
    Nagareboshi
    Nagareboshi
    FémininAge : 28Messages : 4

    Lun 30 Mar 2015 - 22:30

    Merci ! o/



    L'illusion d'un magnifique printemps dans le froid d'un long et pénible hiver. La lumière chaude d'une petite maison dans l'obscurité d'une froide nuit. Cela nous invite immanquablement à rester. Et ce, qui que nous soyons.
    Mister CK
    Mister CK
    MasculinAge : 30Messages : 28

    Mar 7 Avr 2015 - 7:35

    Merci beaucoup !
    Delltus
    Delltus
    MasculinAge : 30Messages : 9

    Ven 10 Avr 2015 - 0:32

    mici
    Sangokudufeu
    Sangokudufeu
    MasculinAge : 29Messages : 9

    Ven 10 Avr 2015 - 22:19

    Merci Wink
    Chèlha
    Chèlha
    FémininAge : 31Messages : 121

    Mar 14 Avr 2015 - 13:31

    Merci
    Izaya Orihara
    Izaya Orihara
    FémininAge : 22Messages : 105

    Jeu 16 Avr 2015 - 16:20

    Merci pour le partage !
    Roromiya
    Roromiya
    FémininAge : 21Messages : 111

    Ven 17 Avr 2015 - 19:05

    Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 11 Enma10
    Tit_Kiwi
    Tit_Kiwi
    FémininAge : 32Messages : 26

    Ven 24 Avr 2015 - 14:19

    Merci beaucoup c'est exactement ce que je cherchais :heart:
    Lal
    Lal
    FémininAge : 32Messages : 51

    Ven 1 Mai 2015 - 14:35

    Merci pour le partage, je suis sur que ça va énormément m'aider ! xD
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Lun 4 Mai 2015 - 11:37

    Exactement ce que je cherchais ! Merci !



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 11 Ye49
    Féery
    Féery
    FémininAge : 23Messages : 23

    Mar 5 Mai 2015 - 10:01

    J'adore *w*
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 29Messages : 46

    Jeu 7 Mai 2015 - 12:14

    Oh c'est super intéressant, j'adore le concept ! *-*
    Merci beaucoup pour ce travail, je vais l'essayer sur mon forum ^w^



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    TiGraou
    TiGraou
    MasculinAge : 30Messages : 243

    Dim 10 Mai 2015 - 23:10

    Merci (y)
    Zarwins
    Zarwins
    FémininAge : 28Messages : 155

    Mar 12 Mai 2015 - 4:53

    Merci beaucoup ! :)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 11 121217030106243656
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Dim 17 Mai 2015 - 21:01

    merci
    Fullmoon
    Fullmoon
    FémininAge : 26Messages : 162

    Lun 25 Mai 2015 - 19:01

    Merci pour le partage, je te l'emprunte ^^
    Awne
    Awne
    FémininAge : 24Messages : 9

    Mer 27 Mai 2015 - 16:40

    Merci :)



    [CSS3] Catégories aux descriptions cachés derrière l'illustration - Page 11 129--a10
    Loeva
    Loeva
    FémininAge : 29Messages : 7

    Mar 9 Juin 2015 - 20:12

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 6:16