.card {     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);     transition: 0.3s;     width: 250px;     border-radius: 5px; }  .card:hover {     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }  img {     border-radius: 5px 5px 0 0; }  .containers { background:rgb(173,216,230);     padding: 2px 16px; }     .transition-icons { text-align: center; margin: 0 0 0 0; padding: 0 0 0 0; } .transition-icons li { display:block; height: 120px; width: 120px; margin: 0 19px; padding: 0 0 0 0; text-align: center; } .button { float:right; display:block; height: 100px; width: 100px; background: url(https://snipp.ru/demo/85/transition.png) 50% 50% no-repeat; background-size: 100% 100%; }  .transition-4 { transition: background-size 1s ease; } .button:hover { background-size: 80px 80px; }   

   <ul class="transition-icons">  <li> <a class="button transition-4" href="#"></a></li>         <li><a class="button transition-4" href="#"></a></li>             <li><a class="button transition-4" href="#"></a></li>                <li> <a class="button transition-4" href="#"></a> </li> </ul>     <?  echo '<div class="card">'; avatar120($ank['id']); echo "<div class='containers'><div class='blue_title'>$ank[nick]".online($ank['id'])."</div>"; echo '   </div>