Смещение Блока при наведении

[ShaxaY]

Верстаю макет, имеется блок с border в 1px, при наведении он должен менять цвет и становится на 1px больше т.е 2px, все сделал, но при наведении он смещает на 1px другие блоки, как можно это исправить?

.welcome-box{
    float:left;
    width:28%;
    margin-left: 3.3%;
    text-align: center;
    border:solid 1px #cac8c5;
    padding:15px 8px;
}
.welcome-box:hover{
    border:solid 2px #1dde85;
}
.welcome .welcome-box:first-child{
    margin-left:0;
}

 

[klierik]

как вариант воспользоватся парой border + outline — https://jsfiddle.net/klierik/n7k6m8ek/

[ShaxaY]

16 часов назад, klierik сказал:

как вариант воспользоватся парой border + outline — https://jsfiddle.net/klierik/n7k6m8ek/

Спасибо большое! Совсем забыл про outline. На данный момент просто использовал box-sizing:border-box;

[BrusSENS]

Как вариант ещё box-shadow.

[ShaxaY]

9 часов назад, BrusSENS сказал:

Как вариант ещё box-shadow.

Пробывал, не красиво выходит(

[BrusSENS]

В 10.01.2017 в 20:09, ShaxaY сказал:

Пробывал, не красиво выходит(

В смысле не красиво? box-shadow вполне можно превратить в border.

[ShaxaY]

1 час назад, BrusSENS сказал:

В смысле не красиво? box-shadow вполне можно превратить в border.

Думаю я просто неправильно указал значение

[BrusSENS]

17 часов назад, ShaxaY сказал:

Думаю я просто неправильно указал значение

Так и есть)