Icofont hover effects
How do I make an icofont hover effects?
What is a icofont hover effects? How do you make a icofont hover effects? This script and codes were developed by AxeLVaisper on 09 November 2022, Wednesday.
Icofont hover effects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icofont hover effects</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css";
*, *:after, *:before { -moz-box-sizing: border-box;
}
body, html { font-size: 100%; height: 100%; margin: 0; padding: 0;
}
.clearfix:before, .clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
body { background: none repeat scroll 0 0 #FFFFFF; color: #AAAAAA; font-family: 'Lato',Calibri,Arial,sans-serif;
}
a { color: #CCCCCC; text-decoration: none;
}
.no-touch a:hover, .no-touch a:active { color: #333333;
}
.container { height: 100%; position: relative;
}
.container > section { margin: 0 auto; min-height: 100%; padding: 20em 3em;
}
.touch .container > section { min-height: 0; padding: 0;
}
.container > header { background: none repeat scroll 0 0 #FFFFFF; left: 0; margin: 0 auto; padding: 2em 1em; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999;
}
.touch .container > header { position: relative;
}
.container > header h1 { font-size: 2.625em; font-weight: 300; line-height: 1.3; margin: 0;
}
.container > header span { display: block; font-size: 60%; opacity: 0.6; padding: 0 0 0.6em 0.1em;
}
.container > section p { color: #FFFFFF; margin: 0; padding: 1em; text-align: center;
}
.codrops-demos { font-size: 0.9em; padding-top: 1em;
}
.touch .codrops-demos { display: none;
}
.codrops-demos a { border: 3px solid #DDDDDD; display: inline-block; font-weight: 700; margin: 0.5em; padding: 0.6em 1em;
}
.codrops-demos a:hover { opacity: 0.6;
}
.codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { border: 3px solid #AAAAAA; color: #AAAAAA; opacity: 1;
}
#set-1 { background: none repeat scroll 0 0 #41AB6B;
}
#set-2 { background: none repeat scroll 0 0 #EEA303;
}
#set-3 { background: none repeat scroll 0 0 #F06060;
}
#set-4 { background: none repeat scroll 0 0 #0E83CD;
}
#set-5 { background: none repeat scroll 0 0 #702FA8;
}
#set-6 { background: none repeat scroll 0 0 #64BB5D;
}
#set-7 { background: none repeat scroll 0 0 #D54F30;
}
#set-8 { background: none repeat scroll 0 0 #3851BC;
}
#set-9 { background: none repeat scroll 0 0 #96A94B;
}
.hi-icon { margin: 15px !important;
}
.container > section { padding: 20em 1em;
}
.codrops-icon span { display: none;
}
.hi-icon-wrap { margin: 0 auto; padding: 2em 0 3em; text-align: center;
}
.hi-icon { border-radius: 50% 50% 50% 50%; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 12pt; height: 90px; margin: 15px 30px; position: relative; text-align: center; width: 90px; z-index: 1;
}
.hi-icon:after { -moz-box-sizing: content-box; border-radius: 50% 50% 50% 50%; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%;
}
.hi-icon:before { display: block; font-size: 48px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 90px; text-transform: none;
}
.hi-icon-effect-1 .hi-icon { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.hi-icon-effect-1 .hi-icon:after { box-shadow: 0 0 0 4px #FFFFFF; left: -7px; opacity: 0; padding: 7px; top: -7px; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-1a .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #41AB6B;
}
.no-touch .hi-icon-effect-1a .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.no-touch .hi-icon-effect-1b .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #41AB6B;
}
.hi-icon-effect-1b .hi-icon:after { transform: scale(1.2);
}
.no-touch .hi-icon-effect-1b .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.hi-icon-effect-2 .hi-icon { box-shadow: 0 0 0 3px #FFFFFF; color: #EEA303; transition: color 0.3s ease 0s;
}
.hi-icon-effect-2 .hi-icon:after { background: none repeat scroll 0 0 #FFFFFF; left: -2px; padding: 2px; top: -2px; transition: transform 0.2s ease 0s, opacity 0.2s ease 0s; z-index: -1;
}
.no-touch .hi-icon-effect-2a .hi-icon:hover { color: #EEA303;
}
.no-touch .hi-icon-effect-2a .hi-icon:hover:after { transform: scale(0.85);
}
.no-touch .hi-icon-effect-2b .hi-icon:hover:after { opacity: 0; transform: scale(0); transition: transform 0.4s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-2b .hi-icon:hover { color: #FFFFFF;
}
.hi-icon-effect-3 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: color 0.3s ease 0s;
}
.hi-icon-effect-3 .hi-icon:after { background: none repeat scroll 0 0 #FFFFFF; left: -2px; padding: 2px; top: -2px; transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; z-index: -1;
}
.hi-icon-effect-3a .hi-icon { color: #F06060;
}
.no-touch .hi-icon-effect-3a .hi-icon:hover { color: #FFFFFF;
}
.no-touch .hi-icon-effect-3a .hi-icon:hover:after { opacity: 0; transform: scale(1.3);
}
.hi-icon-effect-3b .hi-icon { color: #FFFFFF;
}
.no-touch .hi-icon-effect-3b .hi-icon:hover { color: #F06060;
}
.hi-icon-effect-3b .hi-icon:after { opacity: 0; transform: scale(1.3);
}
.no-touch .hi-icon-effect-3b .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.hi-icon-effect-4 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; height: 92px; width: 92px;
}
.hi-icon-effect-4a .hi-icon { transition: box-shadow 0.2s ease 0s;
}
.hi-icon-effect-4 .hi-icon:before { line-height: 92px;
}
.hi-icon-effect-4 .hi-icon:after { border: 4px dashed #FFFFFF; left: -4px; padding: 0; top: -4px; z-index: 10;
}
.no-touch .hi-icon-effect-4 .hi-icon:hover { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); color: #FFFFFF;
}
.no-touch .hi-icon-effect-4b .hi-icon:hover { transition: box-shadow 0.2s ease 0s;
}
.no-touch .hi-icon-effect-4b .hi-icon:hover:after { animation: 9s linear 0s normal none infinite spinAround;
}
.hi-icon-effect-5 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; overflow: hidden; transition: background 0.3s ease 0s, color 0.3s ease 0s, box-shadow 0.3s ease 0s;
}
.hi-icon-effect-5 .hi-icon:after { display: none;
}
.no-touch .hi-icon-effect-5 .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3); color: #702FA8;
}
.no-touch .hi-icon-effect-5a .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toRightFromLeft;
}
.no-touch .hi-icon-effect-5b .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toLeftFromRight;
}
.no-touch .hi-icon-effect-5c .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toTopFromBottom;
}
.no-touch .hi-icon-effect-5d .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toBottomFromTop;
}
.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.no-touch .hi-icon-effect-6 .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #64BB5D;
}
.no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: 2s linear 0s normal none infinite spinAround;
}
.hi-icon-effect-7 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7 .hi-icon:hover { color: #FFFFFF;
}
.hi-icon-effect-7 .hi-icon:after { left: -8px; opacity: 0; padding: 8px; top: -8px; z-index: -1;
}
.hi-icon-effect-7a .hi-icon:after { box-shadow: 0 0 0 #FFFFFF; transition: opacity 0.2s ease 0s, box-shadow 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7a .hi-icon:hover:after { box-shadow: 3px 3px 0 #FFFFFF; opacity: 1;
}
.hi-icon-effect-7a .hi-icon:before { opacity: 0.7; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7a .hi-icon:hover:before { opacity: 1; transform: scale(1);
}
.hi-icon-effect-7b .hi-icon:after { box-shadow: 3px 3px #FFFFFF; transform: rotate(-90deg); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7b .hi-icon:hover:after { opacity: 1; transform: rotate(0deg);
}
.hi-icon-effect-7b .hi-icon:before { opacity: 0.7; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7b .hi-icon:hover:before { opacity: 1; transform: scale(1);
}
.hi-icon-effect-8 .hi-icon { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); transition: transform 0.1s ease-out 0s, background 0.2s ease 0s;
}
.hi-icon-effect-8 .hi-icon:after { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); left: 0; opacity: 0; padding: 0; top: 0; transform: scale(0.9); z-index: -1;
}
.no-touch .hi-icon-effect-8 .hi-icon:hover { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.05); color: #FFFFFF; transform: scale(0.93);
}
.hi-icon-effect-8 .hi-icon:hover:after { animation: 1.3s ease-out 75ms normal none 1 sonarEffect;
}
.hi-icon-effect-9 .hi-icon { transition: box-shadow 0.2s ease 0s;
}
.hi-icon-effect-9 .hi-icon:after { box-shadow: 0 0 0 3px #FFFFFF; left: 0; padding: 0; top: 0; transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-9a .hi-icon:hover:after { opacity: 0.5; transform: scale(0.85);
}
.no-touch .hi-icon-effect-9a .hi-icon:hover { box-shadow: 0 0 0 10px #FFFFFF; color: #FFFFFF;
}
.no-touch .hi-icon-effect-9b .hi-icon:hover:after { transform: scale(0.85);
}
.no-touch .hi-icon-effect-9b .hi-icon:hover { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4); color: #FFFFFF;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div class="container"> <section id="set-1"> <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-2"> <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-3"> <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-4"> <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <p>Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0</p> </section> <section id="set-5"> <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5c"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-6"> <div class="hi-icon-wrap hi-icon-effect-6"> <a href="#set-1" class="hi-icon icon-spin icon-cog">Cog</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-spin icon-time">Time</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-7"> <div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-8"> <div class="hi-icon-wrap hi-icon-effect-8"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> <section id="set-9"> <div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> <div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9b"> <a href="#set-1" class="hi-icon icon-cog">Mobile</a> <a href="#set-1" class="hi-icon icon-thumbs-up">Desktop</a> <a href="#set-1" class="hi-icon icon-print">Partners</a> <a href="#set-1" class="hi-icon icon-time">Support</a> <a href="#set-1" class="hi-icon icon-user">Security</a> </div> </section> </div><!-- /container --> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Icofont hover effects - Script Codes CSS Codes
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css";
*, *:after, *:before { -moz-box-sizing: border-box;
}
body, html { font-size: 100%; height: 100%; margin: 0; padding: 0;
}
.clearfix:before, .clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
body { background: none repeat scroll 0 0 #FFFFFF; color: #AAAAAA; font-family: 'Lato',Calibri,Arial,sans-serif;
}
a { color: #CCCCCC; text-decoration: none;
}
.no-touch a:hover, .no-touch a:active { color: #333333;
}
.container { height: 100%; position: relative;
}
.container > section { margin: 0 auto; min-height: 100%; padding: 20em 3em;
}
.touch .container > section { min-height: 0; padding: 0;
}
.container > header { background: none repeat scroll 0 0 #FFFFFF; left: 0; margin: 0 auto; padding: 2em 1em; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999;
}
.touch .container > header { position: relative;
}
.container > header h1 { font-size: 2.625em; font-weight: 300; line-height: 1.3; margin: 0;
}
.container > header span { display: block; font-size: 60%; opacity: 0.6; padding: 0 0 0.6em 0.1em;
}
.container > section p { color: #FFFFFF; margin: 0; padding: 1em; text-align: center;
}
.codrops-demos { font-size: 0.9em; padding-top: 1em;
}
.touch .codrops-demos { display: none;
}
.codrops-demos a { border: 3px solid #DDDDDD; display: inline-block; font-weight: 700; margin: 0.5em; padding: 0.6em 1em;
}
.codrops-demos a:hover { opacity: 0.6;
}
.codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { border: 3px solid #AAAAAA; color: #AAAAAA; opacity: 1;
}
#set-1 { background: none repeat scroll 0 0 #41AB6B;
}
#set-2 { background: none repeat scroll 0 0 #EEA303;
}
#set-3 { background: none repeat scroll 0 0 #F06060;
}
#set-4 { background: none repeat scroll 0 0 #0E83CD;
}
#set-5 { background: none repeat scroll 0 0 #702FA8;
}
#set-6 { background: none repeat scroll 0 0 #64BB5D;
}
#set-7 { background: none repeat scroll 0 0 #D54F30;
}
#set-8 { background: none repeat scroll 0 0 #3851BC;
}
#set-9 { background: none repeat scroll 0 0 #96A94B;
}
.hi-icon { margin: 15px !important;
}
.container > section { padding: 20em 1em;
}
.codrops-icon span { display: none;
}
.hi-icon-wrap { margin: 0 auto; padding: 2em 0 3em; text-align: center;
}
.hi-icon { border-radius: 50% 50% 50% 50%; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 12pt; height: 90px; margin: 15px 30px; position: relative; text-align: center; width: 90px; z-index: 1;
}
.hi-icon:after { -moz-box-sizing: content-box; border-radius: 50% 50% 50% 50%; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%;
}
.hi-icon:before { display: block; font-size: 48px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 90px; text-transform: none;
}
.hi-icon-effect-1 .hi-icon { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.hi-icon-effect-1 .hi-icon:after { box-shadow: 0 0 0 4px #FFFFFF; left: -7px; opacity: 0; padding: 7px; top: -7px; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-1a .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #41AB6B;
}
.no-touch .hi-icon-effect-1a .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.no-touch .hi-icon-effect-1b .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #41AB6B;
}
.hi-icon-effect-1b .hi-icon:after { transform: scale(1.2);
}
.no-touch .hi-icon-effect-1b .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.hi-icon-effect-2 .hi-icon { box-shadow: 0 0 0 3px #FFFFFF; color: #EEA303; transition: color 0.3s ease 0s;
}
.hi-icon-effect-2 .hi-icon:after { background: none repeat scroll 0 0 #FFFFFF; left: -2px; padding: 2px; top: -2px; transition: transform 0.2s ease 0s, opacity 0.2s ease 0s; z-index: -1;
}
.no-touch .hi-icon-effect-2a .hi-icon:hover { color: #EEA303;
}
.no-touch .hi-icon-effect-2a .hi-icon:hover:after { transform: scale(0.85);
}
.no-touch .hi-icon-effect-2b .hi-icon:hover:after { opacity: 0; transform: scale(0); transition: transform 0.4s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-2b .hi-icon:hover { color: #FFFFFF;
}
.hi-icon-effect-3 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: color 0.3s ease 0s;
}
.hi-icon-effect-3 .hi-icon:after { background: none repeat scroll 0 0 #FFFFFF; left: -2px; padding: 2px; top: -2px; transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; z-index: -1;
}
.hi-icon-effect-3a .hi-icon { color: #F06060;
}
.no-touch .hi-icon-effect-3a .hi-icon:hover { color: #FFFFFF;
}
.no-touch .hi-icon-effect-3a .hi-icon:hover:after { opacity: 0; transform: scale(1.3);
}
.hi-icon-effect-3b .hi-icon { color: #FFFFFF;
}
.no-touch .hi-icon-effect-3b .hi-icon:hover { color: #F06060;
}
.hi-icon-effect-3b .hi-icon:after { opacity: 0; transform: scale(1.3);
}
.no-touch .hi-icon-effect-3b .hi-icon:hover:after { opacity: 1; transform: scale(1);
}
.hi-icon-effect-4 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; height: 92px; width: 92px;
}
.hi-icon-effect-4a .hi-icon { transition: box-shadow 0.2s ease 0s;
}
.hi-icon-effect-4 .hi-icon:before { line-height: 92px;
}
.hi-icon-effect-4 .hi-icon:after { border: 4px dashed #FFFFFF; left: -4px; padding: 0; top: -4px; z-index: 10;
}
.no-touch .hi-icon-effect-4 .hi-icon:hover { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); color: #FFFFFF;
}
.no-touch .hi-icon-effect-4b .hi-icon:hover { transition: box-shadow 0.2s ease 0s;
}
.no-touch .hi-icon-effect-4b .hi-icon:hover:after { animation: 9s linear 0s normal none infinite spinAround;
}
.hi-icon-effect-5 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; overflow: hidden; transition: background 0.3s ease 0s, color 0.3s ease 0s, box-shadow 0.3s ease 0s;
}
.hi-icon-effect-5 .hi-icon:after { display: none;
}
.no-touch .hi-icon-effect-5 .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3); color: #702FA8;
}
.no-touch .hi-icon-effect-5a .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toRightFromLeft;
}
.no-touch .hi-icon-effect-5b .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toLeftFromRight;
}
.no-touch .hi-icon-effect-5c .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toTopFromBottom;
}
.no-touch .hi-icon-effect-5d .hi-icon:hover:before { animation: 0.3s ease 0s normal forwards 1 toBottomFromTop;
}
.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.no-touch .hi-icon-effect-6 .hi-icon:hover { background: none repeat scroll 0 0 #FFFFFF; color: #64BB5D;
}
.no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: 2s linear 0s normal none infinite spinAround;
}
.hi-icon-effect-7 .hi-icon { box-shadow: 0 0 0 4px #FFFFFF; transition: background 0.2s ease 0s, color 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7 .hi-icon:hover { color: #FFFFFF;
}
.hi-icon-effect-7 .hi-icon:after { left: -8px; opacity: 0; padding: 8px; top: -8px; z-index: -1;
}
.hi-icon-effect-7a .hi-icon:after { box-shadow: 0 0 0 #FFFFFF; transition: opacity 0.2s ease 0s, box-shadow 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7a .hi-icon:hover:after { box-shadow: 3px 3px 0 #FFFFFF; opacity: 1;
}
.hi-icon-effect-7a .hi-icon:before { opacity: 0.7; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7a .hi-icon:hover:before { opacity: 1; transform: scale(1);
}
.hi-icon-effect-7b .hi-icon:after { box-shadow: 3px 3px #FFFFFF; transform: rotate(-90deg); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7b .hi-icon:hover:after { opacity: 1; transform: rotate(0deg);
}
.hi-icon-effect-7b .hi-icon:before { opacity: 0.7; transform: scale(0.8); transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-7b .hi-icon:hover:before { opacity: 1; transform: scale(1);
}
.hi-icon-effect-8 .hi-icon { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); transition: transform 0.1s ease-out 0s, background 0.2s ease 0s;
}
.hi-icon-effect-8 .hi-icon:after { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); left: 0; opacity: 0; padding: 0; top: 0; transform: scale(0.9); z-index: -1;
}
.no-touch .hi-icon-effect-8 .hi-icon:hover { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.05); color: #FFFFFF; transform: scale(0.93);
}
.hi-icon-effect-8 .hi-icon:hover:after { animation: 1.3s ease-out 75ms normal none 1 sonarEffect;
}
.hi-icon-effect-9 .hi-icon { transition: box-shadow 0.2s ease 0s;
}
.hi-icon-effect-9 .hi-icon:after { box-shadow: 0 0 0 3px #FFFFFF; left: 0; padding: 0; top: 0; transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.no-touch .hi-icon-effect-9a .hi-icon:hover:after { opacity: 0.5; transform: scale(0.85);
}
.no-touch .hi-icon-effect-9a .hi-icon:hover { box-shadow: 0 0 0 10px #FFFFFF; color: #FFFFFF;
}
.no-touch .hi-icon-effect-9b .hi-icon:hover:after { transform: scale(0.85);
}
.no-touch .hi-icon-effect-9b .hi-icon:hover { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4); color: #FFFFFF;
}
Icofont hover effects - Script Codes JS Codes
//idea codrops https://tympanus.net/Development/IconHoverEffects/
//with modernizr!
Developer | AxeLVaisper |
Username | AxeLVaisper |
Uploaded | November 09, 2022 |
Rating | 3.5 |
Size | 5,719 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Mini Admin panel | 6,642 Kb |
3D gallery | 3,170 Kb |
Slider in only css | 3,418 Kb |
Metro KIT UI | 13,936 Kb |
Funny Spider XD | 4,045 Kb |
Apple navbar | 2,873 Kb |
3D accordion | 13,545 Kb |
Sliding Panel Menu using jQuery | 4,309 Kb |
Tabs with Round Out Borders | 3,248 Kb |
Slideshow in css | 4,377 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
GrcJS | Vino6 | 2,047 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Em Test | Rodesco | 1,784 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Adding Items | Valhead | 4,008 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Button fills | Zubfatal | 5,205 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!