Skip to content

Instantly share code, notes, and snippets.

Created May 30, 2017
What would you like to do?
as seen on ttp://
<div id="wrap">
<h1>Fade Effect on <a href="#">Link Hover</a>?</h1>
<p>Sed molestie tellus risus, <a href="#">varius tempor libero</a>. Ut volutpat magna id lorem aliquet nec volutpat libero vestibulum. Praesent gravida nunc vestibulum mauris aliquam vulputate. Sed quis feugiat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Donec luctus faucibus urna</a>.</p>
<footer>This is a code example for the Stack Overflow question <a href="">Fade Effect on Link Hover?</a></footer>
body { color:#222; background:#fafafa; font:13px/1.4 'segoe ui', sans-serif; }
h1, h2 { margin:0 0 .5em; font:700 2em/1 'myriad pro', sans-serif; } h2 { color:#999; font-size:1.4em; }
p { margin:0 0 1em; } footer { color:#999; margin:3em 0 0; text-align:center; } footer a { color:#777; }
#wrap { margin:1em auto; padding:1.5em; background:#fff; width:500px; box-shadow:0 1em 2em rgba(0,0,0,.15); }
a {
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn't mean it will
work in a browser made by that vendor either, it's just for
future-proofing purposes I guess. */
-o-transition:color 2s ease-out, background 2s ease-in;
-ms-transition:color 2s ease-out, background 2s ease-in;
-moz-transition:color 2s ease-out, background 2s ease-in;
-webkit-transition:color 2s ease-out, background 2s ease-in;
/* ...and now for the proper property */
transition:color 2s ease-out, background 2s ease-in;
a:hover { color:red; background:yellow; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment