Button Hover Effect

Hey guys,

I am trying to achieve a button hover effect so that a different image as loaded and i can basically lower the opacity. The problem is the hover effect loads the new image to the left of the buttons and i cant work out why. I added the stylesheet to the button .rbiButtonStyle.


<div role="button" class="v-button v-button-rbiButtonStyle rbiButtonStyle" tabindex="0"><span class="v-button-wrap"><img src="/CredoWeb/VAADIN/themes/Theme2/icons/RBITemplate.png" class="v-icon" alt=""><span class="v-button-caption">RBI</span></span></div>


.gridLayout .v-button {
      display: block;
      height: 200px;
      background: transparent;
      border: none;
      text-align: center;
      opacity: 0.8;
}


.gridLayout .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.gridLayout .v-button span {
      text-shadow: #fafafa 1px 1px 0;
}

.gridLayout .v-button .v-button-wrap, 
.gridLayout .v-disabled.v-button .v-button-wrap {
   background: transparent;
   border: none;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.gridLayout .v-button:active .v-button-wrap,
.gridLayout .v-button.v-pressed .v-button-wrap {
   background: transparent;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}
 


.gridLayout .rbiButtonStyle:hover{
	background: url("icons/WorkflowTemplate.png") no-repeat;  
	opacity: 1;
}

Can anyone help?
Thanks,
Douglas

Can anyone give any help / Suggestions?.
Is it due to the reindeer theme or something i have missed?.

Regards,
Douglas