Fade bg of button (using CSS3)

Required CSS3 to get image bg to fade for a link

.box1 {

 /*original bg color*/

 /*for rounded corners*/

 border-radius: 5px;

 
/*CSS properties and values to fade transition, ignored by IE*/

-webkit-transition: background-color 2s;

-moz-transition: background-color 2s;

-o-transition: background-color 2s;

-ms-transition: background-color 2s;

transition: background-color 2s;

}



.box1:hover {

 /*background fade in color*/

background-color: red;

}



img.fade {

  opacity: 1;

  -webkit-transition: opacity 1s linear;

}



img.fade:hover {

  opacity: 0;

}