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.


    Mettre une image coulissante

    phenixia74
    phenixia74
    FémininAge : 46Messages : 61

    Sam 21 Jan 2017 - 23:58

    Bonjour à toute la communauté ♥

    Ce thème m'intéresse beaucoup. Celui d'Onyx :
    => https://www.never-utopia.com/t51059-categories-beiges-et-vertes

    Je voulais savoir comment mettre une image coulissante (qui se déplace sur le coté droit par exemple) recouvrant tout le texte de la description du forum.

    Merci par avance :hug:
    Marie
    Marie
    FémininAge : 35Messages : 2206

    Lun 23 Jan 2017 - 1:07

    Coucou!

    Alors met ceci dans la description du forum:

    Code:
      <div class="description">
                 
                  <div class="cache_img">
                        <img src="http://image.noelshack.com/fichiers/2017/02/1484504468-description.png" />
                  </div>
                 
                  <div class="description_texte">
                      Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
                  </div>
                </div>
               
                <div style="clear: both;">
                </div>

    Voici le CSS à mettre dans la feuille de CSS dans le panneau admin:

    Code:
     /*** DESCRIPTION AU SURVOL DE L'IMAGE ***/
        .description {
          width: 500px;/*largeur du contenant*/
          height: 150px;/*hauteur du contenant*/
          overflow: hidden;/*on cache tout ce qui dépasse*/
          position: absolute;
          margin-top: 60px;
          left: 2em;
          background-color: #00000; /*couleur de fond*/
        }
       
        .cache_img {
          position: relative;
          z-index: 2;
          width: 500px; /*la taille doit obligatoirement être de la même taille que le contenu*/
          height: 150px;
          margin-left: 0px;/*pour que l'image cache le contenu et le contenant a ne pas toucher*/
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s; /* Vitesse de dévoilement du contenu*/
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }
       
        .description:hover .cache_img {
          margin-left: 500px; /*l'image dévoile le contenu donc doit obligatoirement inscrire la largeur du contenu*/
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s; /*Vitesse de dévoilement du contenu*/
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }
       
        .description_texte {
          position: relative;
          z-index: 1;
          width: 470px; /*la taille du contenu*/
          height: 90px;
          margin-top: -140px;
          text-align: left;
          font-size: 11px;
          color: #446059;
          padding: 15px;
          overflow: auto; /*affichage du scrollbar*/
          background-color: #00000;
        }

    Bonne soirée! :)
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 18 Fév 2017 - 10:41

    Salut !

    Tu as vu la réponse de Marie ? Tu as pu intégrer son code sur ton forum ?



    sign
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 0:59