MyBB Community Forums

I'm trying to get the words to appear when the image is moused over. And I'm trying to get this to work on a forum post.
so like this:

<style type= "text/css">
ana {
opacity: 0;
transition: opacity 2.5s ease-in-out;
-moz-transition: opacity 2.5s ease-in-out;
-webkit-transition: opacity 2.5s ease-in-out;
-ms-transition: opacity 2.5s ease-in-out;
-o-transition: opacity 2.5s ease-in-out;
}

ana:hover {
transition: opacity 2.5s ease-in-out;
-moz-transition: opacity 2.5s ease-in-out;
-webkit-transition: opacity 2.5s ease-in-out;
-ms-transition: opacity 2.5s ease-in-out;
-o-transition: opacity 2.5s ease-in-out;
opacity: 1;
}

<div class="ana"><img src="img here"><div class="afont"><div style=" text-align:justify; height: 502px;overflow:auto; font-family: tahoma; font-size: 9px; line-height:1.0; text-transform: uppercase"><div style="padding:60px;">
blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words blah blah blah blah blah blah words words testing
</div></div></div></div></style>

i apologize for the hassle, i'm fairly new to coding.

here's an example of the code im trying to do on myBB, the code works on a site that isn't myBB, but for some reason it doesn't work when i try to put it on here

<center><div align=justify style="width: 475px; background-image:url(http://dl.dropbox.com/u/83073428/Fenrir/Requests/roselie2.png); background-repeat: no-repeat; background-position: top center; background-color: #40534D;">
<div align=justify style="padding: 15px; text-indent: 25px;">
<div class=rosa>

<b>OOC</b> They will get better<p>
the crowned caliph would move through the arena like a gladiator awaiting the lethal lion’s bite . his head rolled low against his chest as the chin was held parallel to the ground below him . the ground had a reasoning , it gave as much as it took and it would forever bare the wounds of wolves , humans and all other creatures that walked the plain . his ears would flicker around the crest of his cranium like satellites orbiting the earth . the mother gaia would protect them as long as they protected her , and siro would stand as one of her templars – forever to guard her and take care of her . as he moved along the ground works , the foundation of the lands of fenrir , the king’s flared nostrils would come across a rather pecular scent . for days , weeks , months , very little had come through these lands and each icarus would see if their wings would be burned . his steps were smooth and fluid as he found himself exhaling as he approached to a rather plain looking female . she was rather concerned it would seem as the look upon her face was that of concern , her vocals singing through the winds as a single word would be audible . his chest would expand as the urgency would come before anything else . his paws would flutter to life as he attempted to close the distance between himself and the woman to make sure that she was alright . <i style="font-family:times; font-size:9px; text-transform: lowercase; line-height:10px; word-spacing:2px; letter-spacing:1px; color: #A562DC;">“ miss! “</i> he would call out to the woman . <i style="font-family:times; font-size:9px; text-transform: lowercase; line-height:10px; word-spacing:2px; letter-spacing:1px; color: #A562DC;">“ are you alright? “</i>

<i style="font-family:times; font-size:9px; text-transform: lowercase; line-height:10px; word-spacing:2px; letter-spacing:1px; color: #A562DC;"></i>

</div></div></div>

<style>
.rosa { padding: 15px; background-color: #000000; opacity: 0; font-family: arial narrow; font-size:9px; text-transform: uppercase; line-height:10px;  word-spacing:2px; letter-spacing:1px; color: #82656D; -o-transition:2.5s; -ms-transition:2.5s; -moz-transition:2.5s; -webkit-transition:2.5s; transition:2.5s; height: 500px; }
.rosa:hover { opacity: 1.0; }
</style>
  </div>

bump?

^ which plugin you are using for html on posts ? can we have test URL of the thread where you are trying it