CSS3背景图像悬停过渡

Question

请检查以下链接

http://intelmarketing.mk/demos/security/services/

您将在行中看到3个图标，并且几乎所有悬停都有css3过渡，但是我无法将动画添加到我尝试过的几个示例图标中

http://css3.bradshawenterprises.com/cfimg/-示例1

但是没有接缝可以正常工作，我的图像也是透明的，因此示例1不能按我的要求工作，所以我想要的是当我将鼠标悬停在框上时，按钮和图标同时平滑地悬停，但是按钮却可以正常工作我该怎么解决这个问题？

第一个图标的css：

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;
}

.servbox:hover .fastvagticon
{
    width:299px;
    height:166px;
    background-image:url('images/FASTVAGTh.png');
    background-repeat:no-repeat;
    margin-top:0px;
}

按钮的CSS

.servbtn1
{
    background-color:transparent;
    background-position: right center;
    background-image: url("images/eempy.png");
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 34px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      border:1px solid #fff;
}

.servbox:hover .servbtn1
{
    width:184px;
    height:34px;
    background-color:#3E1C1E;
    background-repeat: no-repeat;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
}

Answer 1

您没有向图标添加任何过渡：

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

另外，我不知道您是否知道，但这在Firefox中不起作用。 Firefox不允许对背景图片进行任何动画处理。