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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* 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; } |