Icon Hover Effects 8 - CodePen

use on css @font-face { font-family: 'ecoicon'; src:url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ec...

use on css

@font-face {
font-family: 'ecoicon'; src:url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.eot'); src:url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'), url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.woff') format('woff'), url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.ttf') format('truetype'), url('http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #aaa;
background: #fff;
  margin: 0;
}

a {
color: #ccc;
text-decoration: none;
}

.no-touch a:hover,
.no-touch a:active {
color: #333;
}

section {
min-height: 100%;
margin: 0 auto;
padding: 3em 3em;
}
#set-8 {
background: #3851bc;
}

.hi-icon-wrap {
text-align: center;
margin: 0 auto;
padding: 2em 0 3em;
}

.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}

.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.hi-icon:before {
font-family: 'ecoicon';
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon-archive:before {
content: "\e00f";
}

.hi-icon-chat:before {
content: "\e010";
}

.hi-icon-bookmark:before {
content: "\e011";
}

.hi-icon-user:before {
content: "\e012";
}

.hi-icon-contract:before {
content: "\e013";
}

/* Effect 8 */
.hi-icon-effect-8 .hi-icon {
background: rgba(255,255,255,0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}

.hi-icon-effect-8 .hi-icon:after {
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}

.no-touch .hi-icon-effect-8 .hi-icon:hover {
background: rgba(255,255,255,0.05);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}

.hi-icon-effect-8 .hi-icon:hover:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
-moz-animation: sonarEffect 1.3s ease-out 75ms;
animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-moz-keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
-moz-transform: scale(1.5);
opacity: 0;
}
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
transform: scale(1.5);
opacity: 0;
}
}


use on html

<section id="set-8">
  <div class="hi-icon-wrap hi-icon-effect-8">
    <a href="#set-8" class="hi-icon hi-icon-archive">Archive</a>
    <a href="#set-8" class="hi-icon hi-icon-chat">Chat</a>
    <a href="#set-8" class="hi-icon hi-icon-bookmark">Bookmarks</a>
    <a href="#set-8" class="hi-icon hi-icon-user">User</a>
    <a href="#set-8" class="hi-icon hi-icon-contract">Contact</a>
  </div>
</section>

source


---

See the Pen Icon Hover Effects 8 by the AIM (@the-aim) on CodePen.