html - mouse hover image background color was not changing for particular images -

hi in below code of images when mouse hover it's not displaying background.but images showing background color because of image or other reason.

as how change image when mouse hover or possible change color of image white way it's possible please me

can 1 me

.specilites{      width: 1050px;      margin: 0 auto 0 auto;      padding-top:7px;      color:#008080;      font-size:30px;  }    .specilites img{        background-repeat: no-repeat;      background-size: cover;      overflow:hidden;      -webkit-border-radius:50px;      -moz-border-radius:50px;      border-radius:50px;      width:90px;      height:90px;      display:inline-block;  	       border: 1.5px solid #008080;  }  .specilites h1{          width: 1050px;          margin: 0 auto 0 auto;          padding-top:7px;          color:#000000;          font-size:20px;      }  .specilites  tr {          font-size:15px;  		padding-top:7px;  		font-weight: bold;       /*    display:block;*/        }  	  .specilites img:hover {      background-color: #40e0d0;  }    	

 <div class="specilites">  	<h1>specialties</h1>         <table>      	 <tr>             <td><a href="#"><img src="img/ambulance-128 (3).png"/></a></td>  		   <td><a style="color:#008080" href="#">accident & emergency care</a></td>              <td><a href="#"><img src="img/bone-128 (1).png"/></a></td>  			<td><a style="color:#008080" href="#">bone & joints</a></td>              <td><a href="#"><img src="img/brain1.png"/></a></td>  			<td><a style="color:#008080" href="#">brains & nerves</a></td>  			<td><a href="#"><img src="img/astro-cancer-128 (2).png"/></a></td>  		    <td><a style="color:#008080" href="#">cancer care</a></td>          </tr>            <td><a href="#"><img src="img/children-128.png"/></a></td>  		  <td><a style="color:#008080" href="#">child care</a></td>            <td><a href="#"><img src="img/clinical.png"/></a></td>  		  <td><a style="color:#008080" href="#">clinical research</a></td>  		   <td><a href="#"><img src="img/dental-128.png"/></a></td>  		   <td><a style="color:#008080" href="#">dental care</a></td>  		   <td><a href="#"><img src="img/ear,nose.png"/></a></td>  		   <td><a style="color:#008080" href="#">ear,nose & throat</a></td>  		</tr>          <tr>             <td><a href="#"><img src="img/kidneys-128.png" /></a></td>  		   <td><a style="color:#008080" href="#">dialysis & kidney transplants</a></td>  		    <td><a href="#"><img src="img/eye.png" /></a></td>  		    <td><a style="color:#008080" href="#">eye care</a></td>  		   <td><a style="color:#008080" href="#"><img src="img/general_surgery.png" /></a></td>  		  <td><a style="color:#008080"href="#">general surgery</a></td>  		   <td><a href="#"><img src="img/genetics.png" /></a></td>  		   <td><a style="color:#008080" href="#">genetics</a></td>  		</tr>  		  		<tr>            <td><a href="#"><img src="img/medicine-128 (1).png" /></a></td>  		   <td><a style="color:#008080" href="#">general medicine</a></td>             <td><a href="#"><img src="img/football-02-128.png" /></a></td>  		   <td><a style="color:#008080" href="#">sports medicine</a></td>  		   <td><img src="img/heart-ecg-128.png" /></a></td>  		   <td><a style="color:#008080" href="#">icu & critical care</a></td>  		   <td><a href="#"><img src="img/home_care.png"  /></a></td>  		   <td><a style="color:#008080" href="#">home care</a></td>  		</tr>                   </table>  </div>

instead of background-color use background.

update can this

.specilites img:hover {      background-image: url('yourimage.png');  }