+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: fade in link hover? (/thread-158298.html)
Pages:
1
2
fade in link hover? - Billie Joe Armstrong - 2014-08-30
is it possible to replace this -
with something like this fade- in effect -
RE: fade in link hover? - adi19 - 2014-08-30
Add transition in css!
Eg:
transition: 0.5s;
RE: fade in link hover? - eNvy - 2014-08-30
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;
}
RE: fade in link hover? - Billie Joe Armstrong - 2014-08-30
Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?
RE: fade in link hover? - MMFB - 2014-08-30
sorry for going off topic but this means that 1.8 has been released?.
RE: fade in link hover? - [email protected] - 2014-08-30
No, this means, there has been created a support section for the mybb 1.8. Mybb 1.8 seems to be released tomorrow.
RE: fade in link hover? - eNvy - 2014-08-30
(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 =).
RE: fade in link hover? - Billie Joe Armstrong - 2014-08-30
(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!
RE: fade in link hover? - ekoice - 2014-08-30
(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
RE: fade in link hover? - Cameron:D - 2014-08-31
(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