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 :
Boutique Nike : -25% dès 50€ sur TOUT le ...
Voir le deal

    Image avec Texte

    Joshua023
    Joshua023
    MasculinAge : 34Messages : 98

    Jeu 7 Aoû 2014 - 23:43

    Ma demande



    Bonjour ou Bonsoir, j'aimerais avoir un nouveau code pour pouvoir encore plus personnalisé mon forum. Merci d'avance à ceux qui prendront en charge ma demande.

    Schéma(s) et Eléments
    Schémas : https://i.servimg.com/u/f39/18/22/70/58/sans_t13.png
    Au passage de la souris -> https://i.servimg.com/u/f39/18/22/70/58/sans_t14.png
    Tailles des éléments : 400px de largeur par 100px de hauteur
    Version de votre forum : PHPBB2

    Ressources
    Pas besoin d'image car je dois en faire une bonne petite vingtaine, donc le code seulement sera suffisant :).

    Autres précisions ?
    L'image reste normal au départ. Au passage de la souris, une petite zone de clarté apparaît, sans pour autant effacer l'image, pour y faire voir du texte. Ce code sera utiliser pour les images dans les catégories dans leurs descriptions.


    Dernière édition par Joshua023 le Ven 8 Aoû 2014 - 0:32, édité 1 fois



    Image avec Texte Signat15
    • Revenir en haut
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Ven 8 Aoû 2014 - 0:18

    Re-bonjour (ou à cette heure bonsoir) à toi,

    Ceci est très basique à faire, je t'avais dis qu'avec simplement le tutoriel fourni tu aurais pu réussir un effet similaire, je me suis pas servis de ce tuto là pour faire ta commande mais plutôt d'un autre qui m'avait servi sur mon propre forum, une petite retouche au code et ça donne ce que tu souhaites (Oui, j'allais pas refaire un code entier alors qu'il serait identique, ça aurait été une perte de temps huhu...)

    Du coup voilà le code HTML à placer dans chaque description de forum où tu veux l'effet :

    Code:
    <div class="description">
    <span style="display: block; width: 400px; height: 100px; background: url(http://img11.hostingpics.net/pics/1675191122.png) center center no-repeat;">
    <span class="description_contenu">Description ici</span>
    </span>
    </div>

    Et le code CSS qui va avec à placer dans ta feuille de style css :

    Code:
    .description {
        display: block;
        width: 400px;
        height: 100px;
        margin: auto;
        overflow: hidden;
    }
    .description_contenu {
        display: block;
        position: absolute;
        width: 391px;
        height: 71px;
        overflow: auto;
        padding: 10px;
        opacity: 0;
        background: rgba(255,255,255,0.5);
        transition: all 1s ease;
    }
    .description_contenu:hover {
        opacity: 1;
        transition: all 1s ease;
    }

    J'ai mis que les propriétés indispensable on va dire, le reste c'est à toi d'adapter pour mettre en forme ton texte, ou encore un cadre tout ça, puisqu'en plus ce n'étais pas précisé dans la commande ^^



    • Revenir en haut
    Joshua023
    Joshua023
    MasculinAge : 34Messages : 98

    Ven 8 Aoû 2014 - 0:31

    oh super, merci c'est exactement ce que je voulais :)
    Merci également pour ta vitesse de réponse :)



    Image avec Texte Signat15
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 25 Nov 2024 - 15:12