CSS Hovering Fill Circle Boundary with Images Bounce

Hover selector is used to select elements when you mouse over them. When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill. And the images is give a little bounce.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title>DotnetModules</title>  
  5.     <style type="text/css">  
  6.          .service-box .icon  
  7.         {  
  8.             width: 100px;  
  9.             height: 100px;  
  10.             border-radius: 50%;  
  11.             background: #18639D;  
  12.             margin: 0 auto;  
  13.             text-align: center;  
  14.             position: relative;  
  15.         }  
  16.         .service-box .icon img  
  17.         {  
  18.             position: relative;  
  19.             z-index: 100;  
  20.             transition: all 0.3s ease 0s;  
  21.         }  
  22.         .service-box .icon:before  
  23.         {  
  24.             content: '';  
  25.             width: 102%;  
  26.             height: 102%;  
  27.             border-radius: 50%;  
  28.             background: #dfdfdf;  
  29.             position: absolute;  
  30.             top: -1px;  
  31.             left: -1px;  
  32.             z-index: 10;  
  33.             -webkit-transform: scale(0);  
  34.             -moz-transform: scale(0);  
  35.             -ms-transform: scale(0);  
  36.             -o-transform: scale(0);  
  37.             transform: scale(0);  
  38.             transition: all 0.3s ease 0s;  
  39.         }  
  40.         .service-box:hover .icon img  
  41.         {  
  42.             -webkit-transform: scale(0.9);  
  43.             -moz-transform: scale(0.9);  
  44.             -ms-transform: scale(0.9);  
  45.             -o-transform: scale(0.9);  
  46.             transform: scale(0.9);  
  47.         }  
  48.         .service-box:hover .icon:before  
  49.         {  
  50.             -webkit-transform: scale(1);  
  51.             -moz-transform: scale(1);  
  52.             -ms-transform: scale(1);  
  53.             -o-transform: scale(1);  
  54.             transform: scale(1);  
  55.         }  
  56.         .service-box h5  
  57.         {  
  58.             font-size: 1.4em;  
  59.             color: #252525;  
  60.             margin: 1em 0em 0.5em 0em;  
  61.         }  
  62.         .service-box p  
  63.         {  
  64.             color: #333333;  
  65.             margin: 0;  
  66.             line-height: 1.8em;  
  67.             width: 95%;  
  68.             font-size: 1em;  
  69.         }  
  70.     </style>  
  71. </head>  
  72. <body>  
  73.     <form id="form1" runat="server">  
  74.     <div class="specialty-grids-top">  
  75.         <div class="col-md-2 service-box" style="visibility: visible; margin: 1%; margin-left: 1em;  
  76.             -webkit-animation-delay: 0.4s;">  
  77.             <figure class="icon">  
  78.                 <span><img src="http://bulletpay.in/images/airtel.png"></span>  
  79.             </figure>  
  80.         </div>  
  81.     </div>  
  82.     </form>  
  83. </body>  
  84. </html>