Как не рушить сетку анимацией?

Question

[Игорь Мок]

Сетка из 6 элементов по 3 на строке

<div class="row center">
	<div class="col-xs-6 col-md-4">

...

img.vk:hover {
		border: 1px;
		border: solid #537599;

Элемент ниже выпадает, как сделать что бы иконка социальной сети в состоянии hover не изменяла размер блока и нижний блок не уезжал?
Hover:

Всего 1 пиксель border и он уехал

spoiler

:(

Answer 1

[Евгений Вольф]

Я думаю 3 варианта:
1. Задавать элементу рамку изначально, например прозрачную, а потом менять её цвет
2. border-box
3. Задавать элементу абсолютное позиционирование, что бы его размеры не затрагивали размеры других элементов

Comments

[Игорь Мок]

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

У меня другой вопрос по border-box, как его использовать для блока внутри которого элементы изменяют свой размер?

[Евгений Вольф]

Игорь Мок, я обычно пишу так:
* { box-sizing: border-box; } - так все элементы получают соотв. размер. В вашем случае, думаю это будет выглядеть как-то так:
div.parent-block > * { box-sizing: border-box; } - т.е. "все вложенные элементы DIV'а с классом ".parent-block". Иными словами - применяйте это свойство к элементам у которых появление рамки "портит" размер элемента.