[HTML][CSS]ustawienie :hover dla img Opcje

[Contritio]

Witam serdecznie

Mam problem z deiniowaniem :hover do elementu img w divie, chcę aby każdy z pojedyńczych elementów zmieniał się, typu gdy najadę na np "facebook" ikonkę to wówczas załaduje mi się inny img. Dodatkowo zupełenie nie chce mi wskoczyć background hover'a który mam w pliku css. Proszę o pomoc.

Kod

<div id="top">
    
             <div id="icon">
             <a href="index.html"><img class="facebook" src="img/facebook1.png" alt="facebook" height="40" width="40"></img></a>
             <a href="index.html"><img class="twitter" src="img/twitter.png" alt="twitter" height="40" width="40"></img></a>
             <a href="index.html"><img class="google" src="img/google.png" alt="google" height="40" width="40"></img></a>
             </div>

Kod

#icon {
     float:right;
     min-height:200px;
     min-width:100px;    
     }
      
     #icon img {
          margin:15% 10px 10px 10px;
     }
    
     #icon .facebook a:hover img {
     background: url(img/facebook.png);
     border:1px solid #CC9900;
     }