Применил в css свойство увеличение размеров картинки при наведении, но тогда съезжает один блок, как быть?

Question

[Даниил]

HTML

<div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 uslugi">
                            <a href="#"><img src="http://placehold.it/250x250"></a>
                            <p>Отопление под ключ</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 uslugi">
                            <a href="#"><img src="http://placehold.it/250x250"></a>
                            <p>Обслуживание котлов</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 uslugi">
                            <a href="#"><img src="http://placehold.it/250x250"></a>
                            <p>Газификация</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 uslugi">
                            <a href="#"><img src="http://placehold.it/250x250"></a>
                            <p>Проектирование</p>
                        </div>
                    </div>
                </div>

CSS

.uslugi{
    text-align: center;
    color: #648FC9;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 10px;
    /**background-color: #648FC9;**/
    border-radius: 0px;
    padding: 20px 20px 20px 20px;
    font-weight: 600;
}
.uslugi img{
    height: 250px;
    width: 250px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.uslugi img:hover{
    width: 260px;
    height: 260px;
}

В итоге, когда экран принимает значение md по бутстрапу <=1200px, то самый первый блок в линии при наведении смещает левый нижиний далеко вниз, при всех остальных ширинах экрана все нормально со всеми остальными блоками, никак не пойму в чем проблема

Answer 1

[iBird Rose]

увеличивай через transform: scale
https://jsfiddle.net/zmvLh6zr/

Comments

[Даниил]

большое спасибо!

[Даниил]

а еще вопрос, в твоем коде 1.1 означает, что по оси икс и игрек увеличение на 10 процентов?

[iBird Rose]

baevdantes1993: да