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 不允许背景图像的任何动画。