title: CSS3 Background-image hover transition
body: <p>please check the following link</p>
  
  <p><a href="http://intelmarketing.mk/demos/security/services/" rel="nofollow">http://intelmarketing.mk/demos/security/services/</a></p>
  
  <p>you will see 3 icons i a row and there is css3 transition on almost all hovers but i can't add the animation to the icons i tried with couple of examples like </p>
  
  <p><a href="http://css3.bradshawenterprises.com/cfimg/" rel="nofollow">http://css3.bradshawenterprises.com/cfimg/</a> - example 1 </p>
  
  <p>but nothing seams to work also my images are transparent so example 1 is not working as i want, so what i want is when i do mouse over on the box the button and the icon same time to hover smoothly, the button works but the icons don't how can i solve this problem?</p>
  
  <p>css for the first icon:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>css for the button</p>
  
  <pre><code>.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;
  }
  </code></pre>