images hover effect in client services

The icons img use in png format and use the icons heights in 64px..

Html

<div class="col-md-3 col-sm-3 col-lg-offset-3 text-center service-border">

                <div class="single-service white-bg">

                    <span class="e-icon"><i class="icon-box homicide"></i></span>

                    <h3>Homicide</h3>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit Aenean commodo.</p>

                </div>

               </div>

Css

.white-bg{background: #fff;}

i {transition: all .3s ease 0s;}

.single-service {padding: 74px 35px 68px; position: relative; transition: all 0.3s ease 0s; border-radius:3px;}

.single-service:hover { box-shadow: 0 40px 40px rgba(7, 7, 7, 0.08); margin-left: -1px; margin-right: -1px; margin-top: -10px; padding: 74px 35px 68px; z-index: 999;}

.single-service > h3 {color: #262626;font-size: 19px; font-weight: 500;margin: 28px 0 19px; text-transform: uppercase;}

.single-service > p {color: #474747;}

.service-border {border-right: 1px solid #f7f7f7 !important; transition: all .3s ease 0s;}

.service-border:last-child {border-right: none;}

.service-border:hover .e-icon{background: #3A220B; border-color:#3A220B; }

.service-border:hover .homicide{background-position: center -64px;}

.service-border:hover .weapons{background-position: center -192px;}

.homicide{background-position:center top;}

.weapons{background-position: center -128px;}

.e-icon{border: 1px solid #E69100; background-color: #E69100; border-radius: 50px; height: 64px; line-height: 64px; transition: all 0.3s ease 0s; width: 64px; display: inline-block; text-align: center;}

.icon-box{ display: inline-block; width: 35px; height: 50px; line-height: 50px; overflow: hidden; background: url(imges/index.png); background-repeat: no-repeat;}