Tekst -> Plaatje

Hi Gast,

Ik heb een probleem. Ik wil namelijk in mijn forum het zo zetten dat in de categorieën er tekst staat. Als j dan met je muis eroverheen gaat dat er dan een plaatje verschijnt. Ik zag meerdere codes hier, maar het lukte bij geen van allen. Wat er dan uitkomt is:

Spoiler:

Als je er dan overheen beweegt  verschijnt het plaatje heel raar. Het knipperd.
Het staat hier omdat ik denk dat het een code probleem is.
Ik hoop dat iemand me kan helpen.
De code in het forum is:

Code:

<div class="ForumAfbeeldingen">
 De bergen tot de wolken. Zo worden ze ook genoemd. Als je voor deze bergen staat zie je de punt niet. Boven de wolken steken ze uit. Er zijn wat dode vulkanen te vinden die niet meer actief zijn en zullen worden. Hoe hoger je klimt hoe kouder het word. Nog nooit heeft een paard het gered er levens op te komen. Maar dat is ook onmogelijk door het zuurstofgebrek. Hoe hoger je komt, hoe minder zuurstof je krijgt. Deze berg ligt tegen het territorium van de Moons aan. Maar iedereen kan hier komen. <a class="forumlink" href="/f39-mountains"><img src="http://i12.servimg.com/u/f12/17/46/20/66/mounta10.png" class="DizAppear" /></a>
</div>

En moest bij,
Display -> Kleuren -> Cascading Style Sheet
Een code helemaal boven of helemaal onder plaatsen.
De code is:

Code:

   div.ForumAfbeeldingen{
       height: 30px;
            width: 592px;
            margin: -23px -4px;
            padding: 25px 8px;

    }

    .DizAppear{
            opacity: 0;
            margin: -50px -7px;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
         display: block;
    }

    .DizAppear:hover{
             opacity: 1;
    }
.bodylinewidth{
width: 900px;
}

body{
 margin: 0px;
}

#page-body{
margin: 0 10px
}

.bodyline{
 background-color: rgba(244,207,142,0.6);
padding: 0px;  
}

.forumline {
  -moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
  border-right: 1px dashed #000000;
 border-left: 1px dashed #000000;
 border-bottom: 1px solid #000000;
 border-top: 1px solid #000000;
}

td.catHead{
   border-width: 0px;
}

a.mainmenu{
  position:relative;
 top: -50px;
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
  }

a.mainmenu:hover{
          filter:alpha(opacity=100);
-moz-opacity: 1.00;
opacity: 1.00;
    }
    div.ForumAfbeeldingen{
       height: 30px;
            width: 592px;
            margin: -23px -4px;
            padding: 25px 8px;

    }

    .DizAppear{
            opacity: 0;
            margin: -50px -7px;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
         display: block;
    }

    .DizAppear:hover{
             opacity: 1;
    }


Ik heb die code toen helemaal onderaan gedaan.

Ik hoop dat iemand me kan helpen.

Hallo,

Ik heb eens de codes getest die je me gaf en ze werken bij mij ook niet zoals gewenst.  Maar ik denk dat ik hier wel een oplossing voor gevonden heb.

We gebruiken min of meer dezelfde code alleen gaan we een extra divider toevoegen rond de tekst. Hiermee kunnen we de hoogte van de tekst beperkt houden door een scrollbalkje eraan te zetten.

Code:

<div class="ForumAfbeeldingen"><div class="tekst">
 De bergen tot de wolken. Zo worden ze ook genoemd. Als je voor deze bergen staat zie je de punt niet. Boven de wolken steken ze uit. Er zijn wat dode vulkanen te vinden die niet meer actief zijn en zullen worden. Hoe hoger je klimt hoe kouder het word. Nog nooit heeft een paard het gered er levens op te komen. Maar dat is ook onmogelijk door het zuurstofgebrek. Hoe hoger je komt, hoe minder zuurstof je krijgt. Deze berg ligt tegen het territorium van de Moons aan. Maar iedereen kan hier komen. </div><a class="forumlink" href="/f39-mountains"><img src="http://i12.servimg.com/u/f12/17/46/20/66/mounta10.png" class="DizAppear" /></a>
</div>

Voor de rest moet je ook zorgen dat je in je css de hoogte van je forumafbeelding gelijk was aan de hoogte van je echte afbeelding.

Code:

div.ForumAfbeeldingen{
 height: 72px;
 width: 480px;
 margin: -23px -4px;
 padding: 25px 8px;
}
.ForumAfbeeldingen .tekst{
 overflow-y: scroll;
 overflow-x: hidden;
 width: 480px;
 height: 72px;
}
.DizAppear{
 opacity: 0;
 margin: -72px 0px;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 display: block;
}
.DizAppear:hover{
 opacity: 1;
}

Als dit niet lukt zeg je het maar, dan controleer ik het nog eens of ik niets fout heb getypt

Heel erg bedankt! ^^