Icofont hover effects

Developer
AxeLVaisper
Size
5,719 Kb
Views
26,299
  1. Icofont hover effects Previews
  2. Icofont hover effects HTML Codes
  3. Icofont hover effects CSS Codes
  4. Icofont hover effects JS Codes

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 Previews
IQ Test

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!
Icofont hover effects - Script Codes
Icofont hover effects - Script Codes
Home Page Home
Developer AxeLVaisper
Username AxeLVaisper
Uploaded November 09, 2022
Rating 3.5
Size 5,719 Kb
Views 26,299
Do you need developer help for Icofont hover effects?

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!

AxeLVaisper (AxeLVaisper) Script Codes
Name
Ribbons
Bootstrap captcha
Mini Admin panel
Slider in only css
Funny menu
Tabs
JQuery folder tabs
Tabs with Round Out Borders
3D accordion
Metro KIT UI
Create amazing video scripts with AI!

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!