In this article we would like to show you how to display some animated icons on your website.
We have prepared three examples, each one with a different effect for icons. We used a beautiful set of icons, which you may know from our JM-Hot-News template.
Let's take a look at examples.
Example 1
In the first example, if you hover an icon, you will notice that the background color changes from white to dark, a gray border appears around the circle and finally a white icon slide from the left while the dark one slide to the right and disappears.
Example 2
The second example is very similar to the first one. The only difference is that on hover the white icon slide from the top while the dark one slide to the down and disappears.
Example 3
The third example is a little different from the above two. On hover the dark icon is replaced with the white one while making a full 360 rotation. All the rest effects are the same.
For better understanding of all these effects, see the examples on live demo.
HTML code
Let's take a look at html code.
<div class="jm-icon-wrap">
<a class="jm-link info" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Information</span>
</a>
<a class="jm-link parking" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Parking</span>
</a>
<a class="jm-link hotel" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Hotel</span>
</a>
<a class="jm-link restaurant" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Restaurant</span>
</a>
<a class="jm-link post" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Post</span>
</a>
<a class="jm-link pub" href="#">
<span class="jm-icon"> </span>
<span class="jm-icon-title">Pub</span>
</a>
</div>
First of all, you need to create a container with the ”jm-icon-wrap” class.
For the first example effect you need to add the „first” class to this element as follows:
<div class="jm-icon-wrap first">
<!-- -->
</div>
For the second example effect you need to add the „second” class as follows:
<div class="jm-icon-wrap second">
<!-- -->
</div>
For the third example effect you need to add the „third” class as follows:
<div class="jm-icon-wrap third">
<!-- -->
</div>
Inside, you need to put a code for all icons. Let's take the information icon as for example. You need to add an anchor tag with the „jm-link info” class. Inside, you need to put two spans. The first one with the „jm-icon” class, the second one with the „jm-icon-title” class. You need to repeat this for all the rest icons, the only thing is to replace the „jm-link info” class to one of the following classes:
<a class="jm-link info" href="#">
<!-- -->
</a>
<a class="jm-link parking" href="#">
<!-- -->
</a>
<a class="jm-link hotel" href="#">
<!-- -->
</a>
<a class="jm-link restaurant" href="#">
<!-- -->
</a>
<a class="jm-link post" href="#">
<!-- -->
</a>
<a class="jm-link pub" href="#">
<!-- -->
</a>
Let's look at the HTML code in detail.
If you would like to change the icon link, you need to edit a path:
<a class="jm-link" href="#">
To change the icon title, you need to edit this section:
<span class="jm-icon-title">Information</span>
CSS styles
CSS styles of the main container:
.jm-icon-wrap {
text-align: center;
}
CSS styles of the icon anchor:
.jm-link {
text-decoration: none !important;
display: inline-block;
margin: 10px 0;
}
CSS styles of the icon spans:
.jm-link .jm-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 0 10px 10px;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
z-index: 1;
border: 3px solid #172b48;
}
.jm-link .jm-icon-title {
display: block;
font-size: 14px;
line-height: 1.3em;
}
.jm-link:hover .jm-icon {
background-color: #172b48;
border: 3px solid transparent;
-webkit-box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
-moz-box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
}
The additional CSS styles for the „Example 1” are preceded by the „first” class used for the "jm-icon-wrap" element.
.jm-icon-wrap.first .jm-link .jm-icon {
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
background-position: -60px 0;
}
.jm-icon-wrap.first .jm-link:hover .jm-icon {
background-position: 0 0;
}
.jm-icon-wrap.first .jm-link.info .jm-icon {
background-image: url('../images/example1/icons-info.png');
}
.jm-icon-wrap.first .jm-link.pub .jm-icon {
background-image: url('../images/example1/icons-pub.png');
}
.jm-icon-wrap.first .jm-link.post .jm-icon {
background-image: url('../images/example1/icons-post.png');
}
.jm-icon-wrap.first .jm-link.restaurant .jm-icon {
background-image: url('../images/example1/icons-restaurant.png');
}
.jm-icon-wrap.first .jm-link.hotel .jm-icon {
background-image: url('../images/example1/icons-hotel.png');
}
.jm-icon-wrap.first .jm-link.parking .jm-icon {
background-image: url('../images/example1/icons-parking.png');
}
The additional CSS styles for the „Example 2” are preceded by the „second” class used for the "jm-icon-wrap" element.
.jm-icon-wrap.second .jm-link .jm-icon {
background-position: 0 -60px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.jm-icon-wrap.second .jm-link:hover .jm-icon {
background-position: 0 0;
}
.jm-icon-wrap.second .jm-link.info .jm-icon {
background-image: url('../images/example2/icons-info.png');
}
.jm-icon-wrap.second .jm-link.parking .jm-icon {
background-image: url('../images/example2/icons-parking.png');
}
.jm-icon-wrap.second .jm-link.hotel .jm-icon {
background-image: url('../images/example2/icons-hotel.png');
}
.jm-icon-wrap.second .jm-link.restaurant .jm-icon {
background-image: url('../images/example2/icons-restaurant.png');
}
.jm-icon-wrap.second .jm-link.post .jm-icon {
background-image: url('../images/example2/icons-post.png');
}
.jm-icon-wrap.second .jm-link.pub .jm-icon {
background-image: url('../images/example2/icons-pub.png');
}
The additional CSS styles for the „Example 3” are preceded by the „third” class used for the "jm-icon-wrap" element.
.jm-icon-wrap.third .jm-link .jm-icon {
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
background-position: 0 0;
}
.jm-icon-wrap.third .jm-link:hover .jm-icon {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.jm-icon-wrap.third .jm-link.info .jm-icon {
background-image: url('../images/example3/icons-info.png');
}
.jm-icon-wrap.third .jm-link.info:hover .jm-icon {
background-image: url('../images/example3/icons-info-hover.png');
}
.jm-icon-wrap.third .jm-link.parking .jm-icon {
background-image: url('../images/example3/icons-parking.png');
}
.jm-icon-wrap.third .jm-link.parking:hover .jm-icon {
background-image: url('../images/example3/icons-parking-hover.png');
}
.jm-icon-wrap.third .jm-link.hotel .jm-icon {
background-image: url('../images/example3/icons-hotel.png');
}
.jm-icon-wrap.third .jm-link.hotel:hover .jm-icon {
background-image: url('../images/example3/icons-hotel-hover.png');
}
.jm-icon-wrap.third .jm-link.restaurant .jm-icon {
background-image: url('../images/example3/icons-restaurant.png');
}
.jm-icon-wrap.third .jm-link.restaurant:hover .jm-icon {
background-image: url('../images/example3/icons-restaurant-hover.png');
}
.jm-icon-wrap.third .jm-link.post .jm-icon {
background-image: url('../images/example3/icons-post.png');
}
.jm-icon-wrap.third .jm-link.post:hover .jm-icon {
background-image: url('../images/example3/icons-post-hover.png');
}
.jm-icon-wrap.third .jm-link.pub .jm-icon {
background-image: url('../images/example3/icons-pub.png');
}
.jm-icon-wrap.third .jm-link.pub:hover .jm-icon {
background-image: url('../images/example3/icons-pub-hover.png');
}
Worth to mention
Please note these effects can be applied to any other icon. If you have your own idea, then feel free to modify the code and CSS styles to fit your needs.