Эффект при наведении на продукт.

[Cronos]

Доброго времени суток. 2 дня мучаюсь с эффектом при наведении на продукт. Сделать желаемое получилось. Но вот когда навожу на продукт остальные блоки "прыгают".

CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
}


.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
} 

 

Как сделать чтобы паддинг и бордет не считались в размер блока при наведении?

 

 

[Гість]

1 - делать при наведении outline

2 - ставить изначально border transparent

[Cronos]

1 - делать при наведении outline

2 - ставить изначально border transparent

А можно там простенька нацарапать а то непонятно маленько. Я конечно прочту как сделать и постараюсь сам вникнуть....

[Гість]

1 - box-product > div {

border 1px solid transparent

...
}

2
.box-product > div:hover {
outline: 1px solid #00aaff;

...
}

[Cronos]

.box-product > div {
	width: 168px;
	display: inline-block;
	vertical-align: top;
	margin: 10px;
	border: 1px solid transparent;
}
.box-product > div:hover {
	box-shadow: 0 0 15px #00aaff;
	border: 1px solid #00aaff;
	padding: 5px;
	outline: 1px solid #00aaff;
}	

0_0 блоки ездят. Может гляните на сам сайт? могу в лс кинуть адрес

[ArtemPitov]

дайте сайт, так проще будет

[OldAine]

CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
}


.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
} 

Конечно блоки будут прыгать, если Вы ставите padding: 5px с каждой стороны + 1px границу border, а чего еще можно было ожидать? 

 

сделайте хотя-бы так что ли:

CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
border: 1px solid #fff;
}
.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
box-sizing: border-box;
} 

Змінено 4 жовтня 2015 користувачем OldAine

[Гість]

Outline заменяет border в данном случае

Змінено 4 жовтня 2015 користувачем Гість