I have implement the CSS3 in my application, if when I hover the li tag at the time the span tag image will be change with transition property. it was working good in chrome, but unfortunatly this effect(transition) is not working properly in firefox

Note: li inside span as a product image

I have tried the following HTML & css code:

<ul>
    <li class="list-col">
        <a href="javascript:void();">
            <span class="service-image">&nbsp;</span>
            <h4>Pest control</h4>
        </a>
    </li>
</ul>

CSS 

  .list-col .service-image {
     background: url("../images/service-08.png") no-repeat 0  0 transparent;
  } 

  .list-col:hover .service-image {
     background: url("../images/service-08-hover.png") no-repeat 0 0 transparent;
     transition: all 5s ease 0s;
  }

kindly share your answer to rectify the issue.

You are not supplying an image url on hovered state. What should happen when you hover the image? Try it like this:

.service-image {
    background-image: url(yourimage.png);
    /* needs vendor prefix */
    -webkit-transition: .5s;
    transition: .5s;
}
.service-image:hover {
    background-image: url(otherimage.png);
}

more