Заставьте изображения трансформироваться по очереди при наведении

Question

У меня есть несколько кнопок социальных сетей, и я дал им небольшой эффект преобразования и масштабирования. Проблема в том, что они все трансформируются одновременно, когда зависли.

Как сделать так, чтобы этот эффект преобразования активировался на каждой отдельной кнопке, а не на всех сразу?

Это мой HTML:

   <div id="social">

     <a href="https://www.facebook.com/ionut.andrei.92" target="_blank"><img src="img/icons/facebook.svg" alt="Facebook"></a>

     <a href="https://vk.com/id362685172" target="_blank"><img src="img/icons/vk.svg" alt="VKontakte"></a>

     <a href="https://www.instagram.com/ioan_andrei93/" target="_blank"><img src="img/icons/instagram.svg" alt="Instagram"></a>

     <a href="https://twitter.com/IoanAndrei11" target="_blank"><img src="img/icons/twitter.svg" alt="Twitter"></a>

    </div>

</div>

Это мой CSS:

#social img{
width: 55px;
height: 55px;
position: relative;
left: 1100px;
top: -50px;



#social:hover img{
transform: scale(1.25);
transition: transform .25s ease;

Answer 1

Вы хотите применить ваши стили при наведении на ссылки a тег вместо #social непосредственно. Если вы примените их на #social они применяются ко всему социальному блоку, то есть ко всем изображениям.

#social a img {
display: inline-block;
transition: transform .25s ease;
}

#social a:hover img {
transform: scale(1.25);
}

<div>
  <div id="social">

     <a href="https://www.facebook.com/ionut.andrei.92" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Facebook"></a>

     <a href="https://vk.com/id362685172" target="_blank"><img src="http://via.placeholder.com/50x50" alt="VKontakte"></a>

     <a href="https://www.instagram.com/ioan_andrei93/" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Instagram"></a>

     <a href="https://twitter.com/IoanAndrei11" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Twitter"></a>

    </div>
</div>