MyBB Community Forums

Full Version: fade in link hover?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
is it possible to replace this - [Image: 9ffdb90e998b71d3f49b8ac0fa9f6f6d.gif]

with something like this fade- in effect - [Image: b295b2bad5997ca17e1b6783bbb6f87d.gif]
Add transition in css!

Eg:
transition: 0.5s;
Transitions in both ways, example:

Quote:.test a:link, .test a:visited {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.test a:hover, .test a:active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?
sorry for going off topic but this means that 1.8 has been released?.
No, this means, there has been created a support section for the mybb 1.8. Mybb 1.8 seems to be released tomorrow.
(2014-08-30, 06:59 PM)Billie Joe Armstrong Wrote: [ -> ]Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?

You can create buttons with opacity 0.5 and then, when you hover, put opacity 1 and add this effect, try it =).
(2014-08-30, 08:04 PM)eNvy Wrote: [ -> ]
(2014-08-30, 06:59 PM)Billie Joe Armstrong Wrote: [ -> ]Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?

You can create buttons with opacity 0.5 and then, when you hover, put opacity 1 and add this effect, try it =).

If i wanted the fade in and out effect on buttons would i just add the same code? 
And thank you!
(2014-08-30, 06:42 PM)eNvy Wrote: [ -> ]
Quote:.test a:link, .test a:visited {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.test a:hover, .test a:active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

and to add a nice movement to  :hover
just add
margin-left: 5px;
 
(2014-08-30, 08:22 PM)Billie Joe Armstrong Wrote: [ -> ]If i wanted the fade in and out effect on buttons would i just add the same code?

yes , and you can play with it

as @eNvy was sain` you can give to :link , :visited {opacity: 0.5;} and to :hover , :active { opacity: 1;} , so when you hover the button it will lighten up
and you can use opacity with the transitions and you`l have a nice effect ...

Happy coding!
eko
(2014-08-30, 06:42 PM)eNvy Wrote: [ -> ]
Quote:-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

For what its worth, -webkit is the only prefix you need now, -moz, -ms and -o were dropped a long time ago, only a few older versions of webkit still require the prefix (Past versions of Safari and old stock Android browsers).
http://caniuse.com/#feat=css-transitions
Pages: 1 2