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 :
LEGO Icons 10331 – Le martin-pêcheur
35 €
Voir le deal

    Ajouter une image sur un cadre de description

    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Mar 6 Juin 2017 - 20:02

    Bonjour à tous! :love:

    Alors voilà, je suis fan des codages de Halloween, :ange: :love: et du coup je suis tombée sous le charme de ce codage:

    www

    Mais après avoir juste modifier les couleurs, (j'ai rien touché d'autres, il est tel qu'il est de base!), je me suis rendue compte que cela faisait très monochrome niveau couleur (Après ce n'est qu'un point de vue).

    Du coup ma question c'est: comment ajouter une image dans le cadre de la description des forums avec un effet hover (genre elle disparait quand on passe dessus).

    J'avoue avoir essayé déjà de mon côté mais j'ai un gros souci avec les balises. J'ai du mal à savoir lesquelles correspondent à quoi!

    Donc voilà, je fait un gros calin et plein de poutou à celui ou celle qui m'aide dans ma noble requête! :hug2: :lovebomb:
    reshiram44
    reshiram44
    MasculinAge : 26Messages : 380

    Dim 11 Juin 2017 - 14:04

    Bonjour, dans ta description de forum tu met ceci :
    Code:
    <div class="description">
    <span style="display: block; width: 400px; height: 100px; background: url(LE LIEN DE TOM IMAGE) center center no-repeat;">
    <span class="description_contenu">T A  D E S C R I P T I O N</span>
    </span>
    </div>

    et dans ton css ceci
    Code:

    .description
    {
      display: block;
      width: 400px;
      margin: auto;
      height: 100px;
      overflow: hidden;
      border: 2px solid #9c9c9c;
      box-shadow: 1px 1px 1px #191817;
      -moz-box-shadow: 1px 1px 1px #191817;
      -htm-box-shadow: 1px 1px 1px #191817;
      -webkit-box-shadow: 1px 1px 1px #191817;
      -o-box-shadow: 1px 1px 1px #191817;
    }
    .description_contenu
    {
      position: absolute;
      display: block;
      width: 391px;
      height: 91px;
      overflow: auto;
      background-color: #191817;
      font-size: 10px;
      color: #9c9c9c;
      text-align: justify;
      padding: 5px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      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;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      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;
    }



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 28 Juin 2017 - 23:54

    Salut !

    Tu as vu la réponse de Reshiram?
    Merci de donner des nouvelles ou ton sujet sera archivé ^^



    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 21:20