AccueilFAQRechercherMembresGroupesS'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.


    Ajouter une image sur un cadre de description

    Partagez
    avatar
    Abby Reever
    FémininAge : 25Messages : 115

    le 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:
    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le 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;
    }



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le 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 Dim 19 Nov 2017 - 16:44