Problema con effetto hover CSS

[Marella88]

Ciao a tutti,
ho un problema con l'effetto Hover su immagine.
Non riesco a capire come mai quando passo il mouse sopra l'immagine di sfondo, questa diventi completamente bianca e non trasparente.
Vi riporto il css:

/*hover CTA */


 .container {
     position: relative;
     width: 100%;
}

 .image {
     display: block;
     opacity:1;
}

 .overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     opacity: 0;
     transition: .3s ease;
     background-color:#fff;
}

 .container:hover .overlay {
     opacity: 1;
}

 .text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     text-align: center;
}

/*hover CTA end*/

e l'html:

<table width="300" align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-cont">
   <tr>
      <td>
         <div class="container">
            <img src="img_kids.jpg" alt="Avatar" width="300" class="image">
            <div class="overlay">
               <div class="text"> <img src="pappapero.jpg" width="150"></div>
            </div>
         </div>
      </td>
   </tr>
</table>

mi sa che mi sfugge qualcosa... riuscireste ad aiutarmi?

Grazie mille,
Mara

[carlomarangoni]

Semplicemente diventa bianca perché diventando trasparente ti fa vedere lo sfondo di defoult del browser che è bianco!
Se ti aspetti di vedere lo sfondo del desktop, non ti avverrà mai