Ultimate Icon Hover Effect using css3

Hello Guys, today in this article I am going to share animated and Ultimate Icon Hover Effect using css3. In this icon hover effect, I am going to use some advance properties of css3 to produce subtle and stylish effect. For icons I am using an icon font which I add using the :before pseudo-class.

As my previous articls Build Responsive Layout using Bootstrap and Equal Height columns with javascript was also very popular hope you like to take a Quick view along with these icon hover effect.

Icons. They exist everywhere, in all our apps and websites these days, and they all produce a result important functions. They gain users into various interactions, or send them to outside partners such as various social media platforms. Icon sprites are commonplace and important from a go to the front standpoint, and divulge us to engage users a bit along in the middle of soar classes. These soar classes have the potential to mass a neat adding of interactivity and style to our apps/sites. In this tutorial, I’m going to lessening you through icon hover effect, each utilizing CSS3 transitions and transforms, engaging the halt users a bit more, and possibly leading to future click-through rates.

How To Use Ultimate Icon Hover Effect using css3 :

Going to share Code for Section 1 for more details download code

HTML

<section id="set-1">
				<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
					<a href="#set-1" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-1" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-1" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-1" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-1" class="hi-icon hi-icon-locked">Security</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
					<a href="#set-1" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-1" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-1" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-1" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-1" class="hi-icon hi-icon-locked">Security</a>
				</div>
			</section>

css:

/* Effect 1a */
.hi-icon-effect-1a .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #41ab6b;
}

.hi-icon-effect-1a .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 1b */
.hi-icon-effect-1b .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #41ab6b;
}

.hi-icon-effect-1b .hi-icon:after {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.hi-icon-effect-1b .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}