Variar progresivamente la opacidad del background

[super_rayo]

¿Cómo puedo variar la opacidad del background (de un div por ej) de forma progresiva al pasar el ratón?

Si hago esto varia la opacidad de todo el contenido y yo solo quiero el background:

Código CSS:

.example{
    background: url() !important;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: opacity 0.3s linear;
}
.example:hover{
    background: url(ii_back.png) !important;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.5s linear;
}
 

Alguna idea? Gracias