hello, i am having a problem getting this hover transition code to work. instead of having to mouse over the image for the text to show up, the text is already on the image. i don't know what i'm doing wrong. someone told me that myBB doesn't support hover transitions, but i have seen threads about it on the forum.
this is the code i'm using:
<style>
.img { 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; }
.img:hover { opacity: 1.0; }
</style>
thank so much for responding, but for some reason even when i put in the code like that it's still not working.
Check your console for errors.
What do you mean? Sorry, I'm a newbie at this and I didn't create the site, I'm just a member on the website.
help?
just to make things a little clearer, i'm trying to use the hover code in a table that would be a picture and when you hover over the picture the text appears on a solid colored background. someone told me that hover transitions and myBB don't mix. is that true?
MyBB is a script which doesn't limit any CSS feature. I use transitions without any problem, there are many themes using it too.
The problem is on your side. Either you use outdated browser like IE or your code is wrong.
So tell in which browsers did you try and post your whole HTML and CSS code of that place.
I'm using Firefox 20.0.1
[dohtml]
<center>
<style>
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;
}
</style>
<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
</center></div></div></div></div></div></center>
[/dohtml]
Firstly, <center> is deprecated. Use CSS text-align: center on parent element instead.
Secondly, in which template is this code? You shouldn't place the CSS in <style /> as there are stylesheets in ACP and it shouldn't be in <body />. Add the CSS to global.css (or any other depends where you use it) of your theme.
And lastly, not sure what you're trying to achieve. The image should appear when you're hovering it? If yes, you need to put the class on image not div.