How to make a fading effect for images on the site?
Nicolas Chabanovsky ♦
38.2k 54 221 438
Scheppa Scheppa
6 one
|
2 answers
This is a CSS based example.
<!DOCTYPE> <html> <head> <style> .fading a{ color: #000; background: #ddd; padding: 10px; -webkit-transition-property: color, background; -webkit-transition-duration: 2s, 2s; -webkit-transition-timing-function: linear, ease-in; } .fading a:hover { color: #eee; background: #a00; } </style> </head> <body> <div class="fading"><a href="#">Hover me</a></div> </body> </html> This is an example based on jQuery.
<!DOCTYPE html> <html> <head> <style> div { display: none; float: left; height: 100px; width: 100px; margin: 10px; } div#hidden { background: #f00; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <a href="#">Click me</a> <div id="hidden"></div> <script> $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); }); </script> </body> </html> 
stanislav stanislav
29.5k 20 74 191
|
Of course there are better options. But if only CSS is CSS3 to help you. Most likely you will need the latter - The background-clip property. And then just apply it to all the IMGs.
BomBom BomBom
237 3 7 20
|