При наведении курсора на одну иконку другие иконки тоже тоже сдвигаются

Question

В footer:е имеются иконки соц. сетей При наведении курсора на одну иконку эта иконка увеличивается в размере но другие иконки тоже двигаются. Нужно что бы при наведении на одну иконку двигалась только одна, на которую навели мышкой. Спасибо!

P.S. Не ругайтесь :) если в примере кода иконки расположены вертикально. Здесь они так отображаются, я только учись верстать...

*,
*:before,
*:after{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
footer {
    max-width: 1380px;
    height: 12.5rem;
    background-color: #fff;
    padding: 4.3rem 0;
    
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.footer__col {
    width: 25%;
    padding: 3rem 1.5rem 0 3.4rem;
}

.footer__links img {
    
    
}

.footer__col ul li:not(:last-child) {
    margin-bottom: 1.9rem;
}

.footer__col ul li a {
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: 500;
    display: block;
    color: rgb(128, 127, 128);
    transition: all 0.5s ease;
}

.footer__col ul li a:hover {
    color: #0046FF;
    padding-left: 0.5rem;
}

.footer__col a img {
    width: 30px;
    height: 30px;
    margin: 1rem 1rem 1rem 1rem;
    transition: all 0.5s ease;
}


.footer__col a img:hover {
    width: 35px;
    height: 35px;
    transition: all 0.5s ease;
    background-color: #0046FF;
    
}

  <footer class="footer container">
        <div class="row">        
            <div class="footer__links footer__col">
                <ul class="footer_links-list">
                    <li class="footer_links-items"><a href="#">Personal data policy</a></li>
                    <li class="footer_links-items"><a href="#">Terms of use</a></li>
                    <li class="footer_links-items"><a href="#">Rules</a></li>
                </ul>
            </div> 

            <div class="footer__links footer__col">    
                <ul class="footer__links-list">
                    <li class="footer_links-items"><a href="#">About us</a></li>
                    <li class="footer_links-items"><a href="#">Contact us</a></li>
                    <li class="footer_links-items"><a href="#">Careers</a></li>
                </ul>
            </div>

            <div class="footer__links footer__col">
                <div class="footer__social-links">
                    <a href=""><img src="https://img.icons8.com/color/2x/facebook.png" alt="F" class="footer_social-link"></a>
                    <a href=""><img src="https://img.icons8.com/plasticine/2x/instagram-new--v2.png" alt="T"class="footer_social-link"></a>
                    <a href=""><img src="https://img.icons8.com/color/2x/pinterest--v5.gif" alt="I" class="footer_social-link"></a>
                    <a href=""><img src="https://img.icons8.com/color/2x/twitter.png" alt="D" class="footer_social-link"></a>            
     
                </div>
            </div>


        </div>    

    </footer>

Answer 1

Используйте transform: scale()
Оно не затрагивает другие элементы.

БЛОГ НА HUSL

При наведении курсора на одну иконку другие иконки тоже тоже сдвигаются

Ответы (1 шт):