Rainbow Hover Effect - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a><a href="#"><i></i></a>

a:nth-of-type(12n + 0) i { background: red; } a:nth-of-type(12n + 1) i { background: #ff8000; } a:nth-of-type(12n + 2) i { background: yellow; } a:nth-of-type(12n + 3) i { background: #80ff00; } a:nth-of-type(12n + 4) i { background: lime; } a:nth-of-type(12n + 5) i { background: #00ff80; } a:nth-of-type(12n + 6) i { background: aqua; } a:nth-of-type(12n + 7) i { background: #007fff; } a:nth-of-type(12n + 8) i { background: blue; } a:nth-of-type(12n + 9) i { background: #7f00ff; } a:nth-of-type(12n + 10) i { background: fuchsia; } a:nth-of-type(12n + 11) i { background: #ff0080; } a { position: relative; z-index: 2; display: block; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; float: left; } a i { display: block; height: 100%; border-radius: 50%; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); -webkit-transition: -webkit-transform 1.5s; -moz-transition: -moz-transform 1.5s; -ms-transition: -ms-transform 1.5s; -o-transition: -o-transform 1.5s; transition: transform 1.5s; } a:hover i { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } body { background: black; color: white; } h1 { color: #181818; font-size: 120px; line-height: 1.0em; margin: 0; z-index: -1; position: absolute; }

Tutorials Palace 10 January, 2019 No Comments

112 Views